React Navigation:多个嵌套的导航器-堆栈-> Tab导航-> Tab导航/路由器(无法决定)->堆栈

Der*_*son 5 javascript react-native react-navigation

编辑2019年4月:越简单越好,我最终为自己想要实现的目标推出了与导航无关的解决方案。凡是在这里发生的故障,无疑是我做错了。

因为我是受虐狂,所以我第一次使用react native时,我试图构建一个相对复杂的社交媒体应用程序(请注意,这是我的第一次,因此我可能完全做错了),其格式如下(伪代码):

Stack Navigator: 
    Home: BottomTabNavigator
    CreatePostScreen: CreatePostScreen
    CreatePostScreen2: CreatePostScreen2, etc
Run Code Online (Sandbox Code Playgroud)

(我在堆栈的最高级别具有“创建发布屏幕”,以便在加载该页面时,出于明显的原因它不会显示选项卡栏)

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)
Run Code Online (Sandbox Code Playgroud)

这就是它开始变得复杂的地方(这是实际的代码,我将在后面解释为什么我不能在选项卡导航器和选项卡路由器之间做出决定)

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)
)
Run Code Online (Sandbox Code Playgroud)

(此代码在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)
Run Code Online (Sandbox Code Playgroud)

我与标签路由器遇到的问题是代码,因为它要么是

A.如果ActiveScreen的navigation = {navigation}被注释掉,即使我将类连接到全局导航并导航到该索引中声明的路由名,也无法从FriendPostsScreen上声明的按钮从FriendPostsScreen导航到LocalPostsScreen。 (我知道我可以在其他地方构造导航按钮,但是在注释掉时,屏幕快照直到将HomeTabNavigator从FriendsScreen更改为FriendsNavigator以来,在FriendsScreen上的SafeAreaView中渲染按钮都可以正常工作)而且,很有趣的是,如果我将HomeTabRouter变成“标签浏览器”,则单击相同的按钮会将我导航到我单击的页面。

B.如果未将其注释掉,它会告诉我“没有为Route LocalNavigator定义键” 屏幕截图

我知道实际的键/路由名不是问题,因为我已经对其进行了测试并通过了所有可能的路由名。

我无法在BottomTabNavigator中将“主屏幕”的屏幕设置为非navigationContainer HomeTabNavigator,因为它告诉我“我必须声明一个屏幕”,而且我不知道其他使用标签路由器的方式。

在列出有关使用选项卡导航器的理由之前,我想重申一下,直到我将Stacknavigator嵌套在其中之前,使用CustomTabView进行的选项卡路由器设置都可以正常工作。

BottomTabNavigator显然已经是一个Tab Navigator,并且我还没有想出只为嵌套的Tab导航器(而不是两者)设置navigationOptions:{tabBarVisible:false}的方法,因为我需要能够自定义Friends的Tab导航器栏/ Local包含一个将我链接到CreatePostScreen的按钮,该按钮位于原始BottomTabNavigator的上方。屏幕截图

我已经做了大量的研究,并且我可以肯定的是,问题是两件事之一:1.我不完全了解堆栈导航器的工作原理,并且做错了一些使其与TabRouter 2不兼容的事情在TabRouter中嵌套StackNavigators存在一个固有的问题。

不管是什么问题,就像我在开始时所说的那样,我是新来的响应本机和响应导航的人。基于我要使用嵌套导航器完成的工作,我是否要以正确的方式进行操作?你有什么建议吗?

我知道时间很长,但是我只是不想跳过任何细节,因此感谢您抽出宝贵的时间阅读!