Question

我正在尝试学习更好的本机响应。在这种情况下，我遇到了一个问题，使用createMaterialTopTabNavigator可以实现导航并且可以正常使用，但是在这种情况下，我有一个带有4个图标的标签栏。但是在这个项目中，我有很多屏幕，无法在该选项卡栏中加载这些屏幕，如果在这些选项卡中添加这些屏幕，它将显示15-20个图标。这是我创建导航的代码：

const NavigationRoutes = createMaterialTopTabNavigator(
    {
        Home: { screen: Home },
        Add: { screen: Add },
        Settings: { screen: Settings },
        List: { screen: List }
    },
    {
        swipeEnabled: true,
        tabBarPosition: "bottom",
        tabBarOptions: {
            showIcon: true,
            style: {
                backgroundColor: "#ccc"
            },
            labelStyle: {
                color: "#333"
            },
            indicatorStyle: {
                backgroundColor: "crimson"
            }
        }
    }
);

因此，如果我创建一个外部导航，就像这样：

const OtherScreens = createStackNavigator(
    {
        Form: { screen: Form },
        Gallery: { screen: Gallery }
    }
);

然后，例如：如何将OtherScreens添加到NavigationRoutes并将Form屏幕加载到NavigationRoutes中的Settings中？！

通常，我可以通过以下方式在NavigationRoutes中加载屏幕：

this.props.navigation.navigate('ScreenName')

但是我在加载外部屏幕时遇到问题，以上代码在这种情况下不起作用。

谢谢

Answer 1

您需要将StackNavigator嵌套在选项卡导航器中。

const OtherScreens = createStackNavigator( { Form: { screen: Form }, Gallery: { screen: Gallery } } );

Other:{screen :OtherScreens}

并将其添加到NavigationRoutes

const NavigationRoutes = createMaterialTopTabNavigator( { Home: { screen: Home }, Add: { screen: Add }, Settings: { screen: Settings }, List: { screen: List }, Other:{screen :OtherScreens}, { swipeEnabled: true, tabBarPosition: "bottom", tabBarOptions: { showIcon: true, style: { backgroundColor: "#ccc" }, labelStyle: { color: "#333" }, indicatorStyle: { backgroundColor: "crimson" } } } );

如何打开其他屏幕进入react native应用？

1 个答案: