更改选项卡导航器名称和标头

Question

我是React Native的新手，我创建了一个底部选项卡Navigator。我有3个菜单：家，租户和工作人员。如何更改工作端子以将按钮名称和标题显示为"工作订单"而不是"工作订单"？

const MainTabNavigator = createBottomTabNavigator({
    Home,
    Tenants,
    WorkOrders
}, {
  navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        headerTitle: routeName
      };
  }
});
const MainStackNavigator = createStackNavigator({
    MainTabNavigator
}, {
  defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon
            style={{ paddingLeft: 10 }}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        )
      };
    }
});
const AppDrawerNavigator = createDrawerNavigator({
  Menu: {
    screen: MainStackNavigator
  }
});
const AppSwitchNavigator = createSwitchNavigator({
  Login: { screen: Login },
  Main: { screen: AppDrawerNavigator }
});
const AppContainer = createAppContainer(AppSwitchNavigator);

谢谢

Answer 1

您可以这样做：

const MainTabNavigator = createBottomTabNavigator({
  ...,
  WorkOrders: {
    screen: WorkOrders,
    navigationOptions: {
      title: 'Work Orders'
      // You can check more options here: https://reactnavigation.org/docs/en/bottom-tab-navigator.html#navigationoptions-for-screens-inside-of-the-navigator
    }
  }
},{
  // BottomTabNavigatorConfig
})

您可以使用其他React-Navigation的API