Question

我是新来的本地人，在导航中遇到了这个问题。我有一个要在每个页面上呈现的“主菜单”（TabNav）。

我有一些页面无法从主菜单（TabNav）访问，但仍应具有菜单选项。我不确定如何隐含这一点。这是我到目前为止的代码：

const TabNav = createMaterialBottomTabNavigator({
    Map: { screen: HomeScreen },
    Details: { screen: Details },
    });
    
const extraNav = createStackNavigator(
    {
        SinglePage: SinglePage,
        Tabs: TabNav
    }
);

const RootStackNav = createStackNavigator(
    {
        Tabs: {
            screen: TabNav
        },
        SinglePage: {
            screen: extraNav,
        }
    },
);

我通过以下方式导航到单个页面：

render() {
    const { navigation } = this.props;
        return (
            <View>
                <Icon 
                    name='place'
                    onPress={() => navigation.navigate('SinglePage')}
                />
            </View>
        );
    }

我想发生的是，当我导航到单独的页面时，“主菜单”仍然存在。现在，我可以导航到所有页面，但是在单个单独的页面上，这些选项卡不可用，我必须点击“返回”以再次访问它。

Answer 1

您可以使用此代码将堆栈导航器嵌套到选项卡导航器

const RootTabNav = createMaterialBottomTabNavigator({
    Map: { screen: HomeScreen },
    DetailStack: { screen: stackNav},
});

const stackNav= createStackNavigator(
    {
        SinglePage: { screen: SinglePage}
        Details: { screen: Details },
    }
);

这只是将堆栈嵌套到tabNavigator的示例。希望对您有帮助。

嵌套在Stack Navigation中的React Native Tab Navigation如何？

1 个答案: