使用自定義選項卡和StackNavigator？

Question

我有用戶列表，每個用戶都有其列表中的顯示圖像。

我想要的是每當用戶按下顯示圖像，通過stackNavigation重定向到他/她的個人資料。

CustomTabView：

const CustomTabView = ({ router, navigation }) => { 
    const { routes, index } = navigation.state; 

    const ActiveScreen = router.getComponentForState(navigation.state); 

    const routeNav = addNavigationHelpers({ 
    ...navigation, 
    state: routes[index], 
    }); 
    const routeOptions = router.getScreenOptions(routeNav, 'tabBar'); 
    return (
    <View style={styles.container}> 
     <CustomTabBar 
     navigation={navigation} 
     activeRouteName={routes[index].routeName} 
     icon={routeOptions.tabBarIcon} 
     /> 
     <ActiveScreen 
     navigation={addNavigationHelpers({ 
      ...navigation, 
      state: routes[index] 
     })} 
     /> 
    </View> 
); 
}; 

StackNavigator： // // goToProfile.js也嘗試將在index.anndroid.js但沒有找到一種方法來導出

const goToProfile = StackNavigator({ 
    Profile: { 
    screen: Profile, 
    navigationOptions: ({ navigation }) => ({ 
     title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}` 
    }) 
    }, 
}) 

定製標籤： //index.android.js

const CustomTabRouter = TabRouter(
    { 
    Chat: { 
     screen: Chats, 
     path: "" 
    }, 
    Status: { 
     screen: Contacts, 
     path: "notifications" 
    }, 
    Camera: { 
     screen: Camera, 
     path: "settings" 
    } 
    }, 
    { 
    initialRouteName: "Chat", 
    }, 


    ); 

    const CustomTabs = createNavigationContainer(
    createNavigator(CustomTabRouter)(CustomTabView) 
    ); 

也是我的組件：

  <TouchableOpacity 
      onPress = {() => this.props.navigation.navigate('Profile', { item }) } > 
       <Avatar 
       source={{ uri: item.picture.thumbnail }} 
       /> 
      </TouchableOpacity> 

Answer 1

您的堆棧導航器看起來就像這樣：

const ChatStack= StackNavigator({ 
     Chat:{screen: Chat, 
     navigationOptions: { 
     header: null, 
    }}, 
    Profile: { 
     screen: Profile, 
     navigationOptions: ({ navigation }) => ({ 
      title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`, 
      tabBarVisible: false 
     // depending if you want to hide the tabBar on the profile page if not remove it. 
     }) 
     }, 
    }) 

然後你customTab將採取這種形狀：

const CustomTabRouter = TabRouter(
    { 
    Chat: { 
     screen: ChatStack, 
    }, 
    Status: { 
     screen: Contacts, 
     path: "notifications" 
    }, 
    Camera: { 
     screen: Camera, 
     path: "settings" 
    } 
    }, 
......... 

這些變化，你應該能夠導航到個人資料屏幕上用

this.props.navigation.navigate('Profile', { item }) 

Answer 2

你要派遣一個導航行動，而不是呈現一個新的堆棧 - 雖然我不知道你的導航儀的構築這一成功...

_goToProfile = (person) => { 
    <goToProfile navigate={this.props.navigation} /> 
} 

應該

_goToProfile = (person) => { 
    this.props.navigation.navigate('Profile', person) 
}