如何在反应原生应用程序中打开其他屏幕？答案

【问题标题】：How can I open other screens into the react native app?如何在反应原生应用程序中打开其他屏幕？
【发布时间】：2018-08-19 05:12:46
【问题描述】：

我正在努力学习更好的 react-native。在这种情况下，我有一个问题，使用 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 并将表单屏幕加载到 NavigationRoutes 中的设置中？！

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

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

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

谢谢

【问题讨论】：

这个问题很混乱，你能解释一下你想做什么吗？
@SGhaleb OK :-) 我有一个简单的应用程序，它有 15 个屏幕。主屏幕是主页、列表和添加。所以，从逻辑上讲，我不能在导航栏中显示每 15 个项目，我应该加载外部屏幕并使用技巧打开其他选项卡。例如：我没有在标签栏中设置设置，但我需要在按一个按钮进入主屏幕后加载该屏幕。我的主要问题是，如何使用道具打开其他屏幕。像这样是默认模式：this.props.navigatio.navigate('List')
@SGhaleb 例如检查这个网址，我已经创建了一个截图：s8.picofile.com/file/8334915618/question.jpg
您想在单击不在标签栏中的按钮时打开屏幕？此外，您应该将该屏幕截图添加到您的问题中。
@SGhaleb 是的，但这种情况不同，在主根目录（createMaterialTopTabNavigator）中，我只有 4 个屏幕，这些链接显示在右侧的导航栏中。但我需要在主要路线（createMaterialTopTabNavigator）中打开其他屏幕。你明白这个问题了吗？

标签： javascript react-native routes react-navigation

【解决方案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" } } } );

【讨论】：

那么我可以使用代码访问其他屏幕吗？ this.props.navigation.navigate('OtherScreen');
在其他内部，您可以访问Form 和Gallery 。基本上OtherScreens堆栈导航中的任何内容
好的，但是如何禁用其他标签进入材料标签导航？
其他选项卡是一个屏幕，如果禁用它，您将无法使用它的导航。相反，您现在应该在 Home 选项卡中更改 Home: { screen: OtherScreens }，您可以访问表单和图库。