React-navigation：如何添加 TabNavigator 中未显示的导航？

Question

我正在开始使用 react-navigation 的 expo。
我正在尝试构建默认的 TabNavigation 应用程序。
默认情况下，它有一个加载 MainTabNavigator

的 RootStackNavigator

const RootStackNavigator = StackNavigator(
  {
    Main: {
      screen: MainTabNavigator,
    },
  },
  {
    navigationOptions: () => ({
      headerTitleStyle: {
        fontWeight: 'normal',
      },
    }),
  }
);

MainTabNavigator 是一个 TabNavigator 实例。

我创建了一个屏幕 "ListItemScreen" 并将其添加到 TabNavigator。
在这个屏幕上，我想要一个可以转到另一个屏幕的按钮 "FormScreen"，其中包含用于添加项目的表单。
如何创建 for "FormScreen" 而不将其添加到 TabNavigator？
我应该创建一个 StackRouter 吗？如果是这样，我该如何构建文件？
我已经阅读了几次文档，但没有理解。

Answer 1

您不必将 FormScreen 添加到 TabNavigator，而是添加到 StackNavigator。

const RootStackNavigator = StackNavigator(
  {
    FormScreen: {
      screen: FormScreen,
    },
    /* ... other routes ... */
  }
}

所以Tabs中的Button可以直接调用navigate():

<Button title="Go FormScreen" onPress={() => this.props.navigation.navigate('FormScreen')} />

官方文档Nesting a Navigator in a Screen为此提供了一个很好的例子。

React-navigation：如何添加 TabNavigator 中未显示的导航？

React-navigation: How to add navigation that doesn't show up in TabNavigator?

react-native

react-navigation

expo