javascript - 合并 createStackNavigator 和 createBottomTabNavigator？

Question

场景:

• 我有一个应用程序，可使用三个导航选项卡(学校、管理员、家庭)；
• 我现在正在尝试添加其他屏幕，这些屏幕不会有相应的选项卡。这些屏幕将使用类似 this.props.navigation.navigate('ChatScreen') 的内容进行导航

问题 - 根据我过去的解决方案，每当我添加屏幕时，它都会为该屏幕添加一个选项卡。

待办事项:

• 我希望在导航堆栈中包含选项卡以及其他正常(非选项卡)屏幕。

  • 我希望选项卡和标题都保持不变

• 我未能成功地将两者结合起来，并且尝试了很多 以下代码的变体。

尝试过的代码:

const School = createStackNavigator({
  School: { 
  screen: SchoolScreen, 
  navigationOptions: {
  headerTitle: <CustomHeaderTitle screen='school'/>
    }
  }
 });

const Admin = createStackNavigator(
  { Admin: {
  screen: AdminScreen,
  navigationOptions: {
    headerTitle: <CustomHeaderTitle screen='admin' />
      }
    }
  });

 const Family = createStackNavigator(
  {
   Family: {
      screen: FamilyScreen,
      navigationOptions: {
      headerLeft: null,
      headerTitle: <CustomHeaderTitle screen='family' />
      }
     }
    }
);

const ChatStack = createStackNavigator({
  CreateChat: CreateChatScreen
});

const TabStack = createBottomTabNavigator(
  {
    School: School,
    Admin: Admin,
    Family: Family
  },
  {
navigationOptions: ({ navigation }) => ({

  tabBarIcon: () => {
    const { routeName } = navigation.state;
    return <Image id={1} source={require('./app/img/school_logo.png')} />
  },
  tabBarLabel: navigation.state.routeName
}),
tabBarOptions: {
  activeTintColor: 'tomato',
  inactiveTintColor: 'gray',
  style: {
    backgroundColor: 'black',
    height: 55
  }
}

  }
);

const RootStack = createStackNavigator({
  Root: ChatStack,
  Tabs: TabStack
})

export default class App extends Component {
  render() { return (
      <Provider store={store}>
        <RootStack />
      </Provider>
    );
  }
}

抱歉，经过一段时间的斗争，我无法格式化这段代码。

感谢您提前提供的任何帮助或建议!
请提出建议。

Answer 1

感谢一位未透露姓名的 Reddit 用户:

您必须将整个堆栈嵌套到选项卡导航器的每个屏幕中。据我所知，如果 StackNavigator 中的不同屏幕嵌套在不同的 TabNavigator 屏幕中，则无法访问它们。

例如，如果您希望能够从 SchoolScreen 导航到聊天屏幕，则必须将该组件包含在您的 School 导航器中。

 const School = createStackNavigation({
   School: {
       screen: SchoolScreen
   },
   SchoolChat: {
       screen: CreateChatScreen
   } 
 });

从那里你的主 TabNavigator 应该看起来差不多

const TabStack = createBottomTabNavigator({
    School: School
});