在所有屏幕上显示标签 React Native

Question

我是本机反应的新手。 我使用 createBottomTabNavigator 创建了一个选项卡菜单，我也在使用 createStackNavigator，因为我有许多按钮可以将您带到另一个屏幕。 当我转到不在选项卡菜单中的屏幕时，选项卡不会出现。 有什么办法可以让我的标签菜单出现在所有屏幕上？

这是我的应用程序的外观

这是我的代码

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title:  'Home',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}
          size={30}
          color={focused ? '#E8AA65' : '#58585A'}
        />
      ),
    },
  },
  Give: {
    screen: FollowScreen,
    navigationOptions: {
      title:  'Give',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-heart' : 'md-heart'}
          size={30}
          color={focused ? '#E8AA65' : '#58585A'}
        />
      ),
    },
  },
  Events: {
    screen: EventScreen,
    navigationOptions: {
      title:  'Events',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'}
          size={30}
          color={focused ? '#E8AA65' : '#58585A'}
        />
      ),
    },
  },
  More: {
    screen: EventScreen,
    navigationOptions: {
      title:  'More',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-more' : 'md-more'}
          size={30}
          color={focused ? '#E8AA65' : '#58585A'}
        />
      ),
    },   
  },
},
{
  initialRouteName: 'Home',
  tabBarOptions: {
      labelPosition: 'below-icon',
      activeTintColor: '#E8AA65',
      inactiveTintColor: '#58585A',
      fontSize: 50,
      style: {
        height: 50,
        backgroundColor: '#3B3B3B',
       }
    },
  });

  const MyStack = createStackNavigator({ 
  TabNavigator,
  Home: {
      screen: HomeScreen,
      navigationOptions: {
        headerTitle: 'Home',
         headerRight: (
           <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
           onPress={() => navigation.navigate('Search')} />
           ),
           headerTitleStyle:{
             color: "white",
             alignSelf: "center",
             fontSize: 20        
           },
           headerStyle:{
             backgroundColor: "#404042"
          } 
         }
    },
  Listen: {
       screen: MainScreen,
       navigationOptions: {
        headerTitle: 'Listen',
         headerRight: (
           <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
           onPress={() => navigation.navigate('Search')} />
           ),
           headerTitleStyle:{
             color: "white",
             alignSelf: "center",
             fontSize: 20        
           },
           headerStyle:{
             backgroundColor: "#404042"
          } 
         }
     },
  Sermons: {
       screen: SecondActivity,
       navigationOptions: {
         headerTitle: 'Sermons',
          headerRight: (
            <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
            onPress={() => navigation.navigate('Search')} />
            ),
            headerTitleStyle:{
              color: "white",
              alignSelf: "center",
              fontSize: 20        
            },
            headerStyle:{
              backgroundColor: "#404042"
           } 
          }    
    },
    About: {
      screen: AboutScreen,
      navigationOptions: {
        headerTitle: 'About',
         headerRight: (
           <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
           onPress={() => navigation.navigate('Search')} />
           ),
           headerTitleStyle:{
             color: "white",
             alignSelf: "center",
             fontSize: 20        
           },
           headerStyle:{
             backgroundColor: "#404042"
          } 
         }
   },
  Map: {
       screen: MapScreen,
       navigationOptions: {
        headerTitle: 'Map',
         headerRight: (
           <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
           onPress={() => navigation.navigate('Search')} />
           ),
           headerTitleStyle:{
             color: "white",
             alignSelf: "center",
             fontSize: 20        
           },
           headerStyle:{
             backgroundColor: "#404042"
          } 
         }
     },
   Search: {
      screen: SearchScreen,
      navigationOptions: {
        headerTitle: 'Search',
         headerRight: (
           <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
           onPress={() => navigation.navigate('Search')} />
           ),
           headerTitleStyle:{
             color: "white",
             alignSelf: "center",
             fontSize: 20        
           },
           headerStyle:{
             backgroundColor: "#404042"
          } 
         }
     },
    Follow: {
      screen: FollowScreen,
      navigationOptions: {
        headerTitle: 'Follow Us',
         headerRight: (
           <Icon name="ios-search" color="#fff" size={30} style={{paddingRight: 20}}
           onPress={() => navigation.navigate('Search')} />
           ),
           headerTitleStyle:{
             color: "white",
             alignSelf: "center",
             fontSize: 20        
           },
           headerStyle:{
             backgroundColor: "#404042"
          } 
         }
     }
    }
  )

Answer 1

您当前的结构是 StackNavigator 中的 TabNavigator。 也许（对于您的用例）采用另一种方式会更好，其中 TabNavigator 是主导航器，每个选项卡屏幕都包含自己的 StackNavigator。