Question

我是React Native的新手，我创建了一个底部标签导航器。我有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进行相同操作

更改标签导航器名称和标题

1 个答案: