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

Question

我是 react native 的新手，我创建了一个底部选项卡导航器。我有 3 个菜单：Home、Tenants 和 WorkOrders。如何更改 WorkOrders 以将按钮名称和标题显示为“Work Orders”而不是“WorkOrders”？

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 做同样的事情