场景:

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

    问题
    -根据我过去的解决方案,每当我添加一个屏幕时,都会为该屏幕添加一个标签。

    待办事项:
  • 我想在导航堆栈中包含选项卡,以及其他常规(非选项卡)屏幕。
  • 我希望选项卡和 header 都是持久的
  • 我无法将两者结合在一起,并且尝试了很多
    下面代码的变体。

  • 尝试代码:
    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>
        );
      }
    }
    

    抱歉,经过一段时间的处理,我无法格式化此代码。

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

    最佳答案

    归功于未命名的redditor:

    您必须将整个堆栈嵌套在标签导航器的每个屏幕中。据我所知,如果嵌套在不同的TabNavigator屏幕中,则无法访问StackNavigator中的不同屏幕。

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

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

    从那里,您的主要TabNavigator应该看起来差不多
    const TabStack = createBottomTabNavigator({
        School: School
    });
    

    10-01 07:25