在React Native中将createBottomTabNavigator与createStackNavigator一起使用

Question

我是本机反应的新手，我试图创建一个标签栏，还使用createStackNavigator允许我将屏幕链接在一起。我已经能够将其与以下代码一起使用。

const TabNavigator = createBottomTabNavigator({
  Home: { 
    screen: HomeScreen
    
},
  Events: { 
    screen: EventScreen

  },
  About: { 
    screen: AboutScreen
  }
},
 { tabBarOptions: { 
    showIcon: true,
    activeTintColor: '#D4AF37',
      inactiveTintColor: 'gray',
      style: {
       backgroundColor: 'white', 
},
  labelStyle: {
    fontSize: 20,
  }
}
 }
);

const MyStack = createStackNavigator({ 
Tabs: {
   screen: TabNavigator
 }, 
 Home: {
     screen: HomeScreen
   },
 Sermons: {
     screen: SecondActivity
  },
   Map: {
     screen: MapScreen
   }
 },
   {
   initialRouteName: 'Tabs',
 }
);
  
export default createAppContainer(MyStack);

唯一的问题是，当我运行我的应用程序时，每个页面的标题中都会显示标签，如下所示。有什么办法可以解决这个问题？

Answer 1

尝试设置navigationOptions：

 Home: {
   screen: HomeScreen,
   navigationOptions: ({ navigation, screenProps }) => ({
     title: `My home page`
   })
 }

Answer 2

是的，您可以将navigationOptions传递到不同的堆栈！

    const ENTRYSTACK= createStackNavigator(
  {
    ENTRY: {
      screen: ENTRYSCREEN,
      navigationOptions: {
        headerTitle: "Your Header Title",
        headerTitleStyle:{
          color: "white",
          alignSelf: "center"         // some styling if u want 
        },
        headerStyle:{
          backgroundColor: "#a51717"
        }
      }
    }, some other screens/stacks ... 
  }
)