结合使用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

当 TabStack 聚焦时，您应该隐藏 RootStack 标头

TabStack.navigationOptions = {
  // Hide the header from root stack
  header: null,
};

并且您不需要将堆栈添加到 CreateChatScreen

const RootStack = createStackNavigator({
  Tabs: TabStack,
  ChatScreen: CreateChatScreen,
})