使用自定义选项卡和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) 
}