时间戳

首页 > 解决方案 > 在 React Native 中使用 createBottomTabNavigator 和 createStackNavigator

javascript - 在 React Native 中使用 createBottomTabNavigator 和 createStackNavigator

问题描述

我是本机反应的新手，我正在尝试创建一个标签栏并使用 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);

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

应用程序

标签： javascriptreact-native

解决方案

尝试设置navigationOptions：

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

推荐阅读