反应导航 v2 从底部选项卡导航器中隐藏单个选项卡

Question

我正在开发一个 React Native 应用程序。当用户加载应用程序时，我希望他们看到的第一个屏幕是主屏幕，以告诉他们应用程序的一些功能。 目前，我正在使用带有嵌套StackNavigators的BottomTabNavigator。我已经能够添加我的主屏幕，但它总是显示在 TabNavigator 中。有没有办法使单个选项卡项不存在于任何屏幕中？

附言。我尝试使用StackNavigator作为我的父级，如下所示，但我的TabNavigator没有显示：

const AppNavigator = createBottomTabNavigator({
Item1: Item1,
Item2: Item2,
Item3: Item3, 
Item4: Item4,
Item5: Item5
});
const MainNavigator = createStackNavigator({
Home: Home,
Content: AppNavigator
}

有什么想法吗？

更新

如果我有名为"项目1"、"项目2"、"项目3"、"项目4"、">项目5"和"主页"的屏幕，我想让它首先显示"主页"。此外，我希望选项卡栏在底部可见，但它不能包含主屏幕。

Answer 1

您可能希望将主应用程序选项卡导航器嵌套在另一个选项卡导航器中，如下所示：

const AppNavigator = TabNavigator({
Main: { screen: MainScreen },
Settings: { screen: SettingsScreen },
});
export default TabNavigator(
{
Home: { screen: HomeScreen },
App: { screen: AppNavigator },
},
{
navigationOptions: ({ navigation }) => ({
tabBarVisible: false,
}),
}
);

Answer 2

我认为SwitchNavigator是你需要 https://reactnavigation.org/docs/en/switch-navigator.html 的。像这样尝试

const MainNavigator = createSwitchNavigator({
Home: Home,
Content: AppNavigator
}

如果你想要TabNavigator，你可以简单地做同样的事情

const MainNavigator = createBottomTabNavigator({
Home: Home,
Content: AppNavigator
}

Answer 3

为选项卡导航器创建自定义选项卡栏组件以供使用。

映射该自定义选项卡栏组件中的路由，如果route.routeName === 'Home'，则不为该选项卡呈现任何内容。

const TabBar = props => {
return (
{navigation.state.routes.map((route, i) => {
if (route.routeName !== 'Home') {
return (
<Tab...