Question

编辑2019年4月：更简单总是更好，我最终为我想要完成的事情滚动了一个非导航相关的解决方案。无论在这里打破了什么，无疑是我做错了。

因为我是受虐狂，我第一次使用本地反应，我正在尝试构建一个相对复杂的社交媒体应用程序（注意这是我的第一次，因此我可能会这样做完全错了）格式如下（伪代码）：

Stack Navigator: 
    Home: BottomTabNavigator
    CreatePostScreen: CreatePostScreen
    CreatePostScreen2: CreatePostScreen2, etc

（我有＆＃34;创建帖子屏幕＆＃34;在堆栈的最高级别，这样当你加载该页面时，由于显而易见的原因它没有显示标签栏）

BottomTabNavigator = TabNavigator:
    Homescreen: HomeTabRouter (TabRouter, see below)
    Explore: ExploreNavigator (stack navigator, works fine)
    Notifications: NotificationsNavigator (stack navigator, works fine)
    Profile: ProfileNavigator (stack navigator, works fine)

这里开始变得复杂（这是实际的代码，我将解释为什么我不能在标签导航器和标签路由器之间做出决定）

export const HomeTabNavigator = TabRouter({
    FriendsNavigator: {
        screen: FriendsNavigator,
        path: 'Friends',
        routeName: 'Friends',
    },
    LocalNavigator: {
        screen: LocalNavigator,       
        path: 'LocalScreen',
        routeName: 'LocalScreen'
    },

}, 
{
    headerMode: 'none',
}
)

const CustomTabView = ({ router, navigation }) => {
    const { routes, index } = navigation.state;
    const ActiveScreen = router.getComponentForRouteName(routes[index].routeName);   
    return (
        <View style={{flex: 1}}>
        <ActiveScreen
            // navigation={navigation} (commented out because if it's not, 
            my app won't render anything and tell me there is no route defined
            for key "LocalNavigator" and this is because the ActiveScreen
            is a StackNavigator that isn't aware of the other StackNavigators
            even though I think it should be???)
        />
        </View>
    );
};

export default HomeTabRouter = createNavigationContainer(
    createNavigator(HomeTabNavigator)(CustomTabView)
)

（此代码在HomeTabNavigator实例化之前出现，但为了便于阅读，我将其放在之后）

export const FriendsNavigator = StackNavigator({
    FriendPostsScreen: {
        screen: FriendPostsScreen,
        path: 'Friends',
        routeName: 'Friends'
    },
    IndividualFriendPostPage: {
        screen: IndividualFriendPostPage,
        routeName: 'IndividualFriendPostPage'        
    }
},    
{
    headerMode: 'none',

});
(LocalNavigator is an exact copy of FriendsNavigator, just gives the option to 
navigate between the screen of all posts and the screen of a specific post)

我对标签路由器的问题是代码是

一个。如果针对ActiveScreen的navigation = {navigation}被注释掉，即使我将类连接到全局导航并导航到该索引中声明的路由名，我也无法从FriendPostsScreen上声明的按钮从FriendPostsScreen导航到LocalPostsScreen （我知道我可以在其他地方构建导航按钮，但直到我将HomeTabNavigator从FriendsScreen更改为FriendsNavigator渲染，FriendsScreen上的SafeAreaView中的按钮工作正常）screenshot when commented out.而且，有趣的是，如果我转向HomeTabRouter进入选项卡导航器，单击相同的按钮将导航到我单击的页面。

B中。如果它没有被注释掉，它告诉我＆＃34;没有为路由LocalNavigator＆＃34;定义键。 screenshot

我知道它不是真正的密钥/路由器的问题，因为我已经对它进行了测试并通过了所有可能的路由名称。

我无法设置＆＃34; Homescreen＆＃34;的屏幕。在BottomTabNavigator中到非navigationContainer HomeTabNavigator，因为它告诉我＆＃34;我必须声明一个屏幕，＆＃34;而且我不知道使用标签路由器的任何其他方式。

在我列出使用标签导航器的推理之前，我想重申使用CustomTabView的标签路由器设置工作正常，直到我在其中嵌套stacknavigators。

BottomTabNavigator显然已经是一个Tab Navigator了，我还没想办法为嵌套选项卡导航器设置navigationOptions：{tabBarVisible：false}，而不是两者都有，因为我需要能够自定义“朋友/本地”选项卡导航栏包含一个按钮，该按钮将我链接到原始BottomTabNavigator上方的CreatePostScreen级别。 screenshot

我做了大量的研究，我很确定这个问题是两件事之一： 1.我不完全了解堆栈导航器的工作原理以及我做错了什么使得它与TabRouter不兼容 2.在TabRouter中嵌套StackNavigators存在一个固有的问题。

无论出现什么问题，就像我在开始时所说的那样，我对新的反应和反应导航做出了新的反应。基于我试图用嵌套导航器完成的任务，我是否正确地采用了它？您有什么推荐的吗？

我知道它很长但我不想跳过任何细节，所以感谢您花时间阅读！

React Navigation：多个嵌套导航器 - Stack - ＆gt;标签导航 - ＆gt;标签导航/路由器（无法决定） - ＆gt;堆

0 个答案: