react-native - 在 react native 中翻译 react navigation tabBarLabel

Question

我在其中一个屏幕上有几个屏幕，我有一个带有两个选项卡的 materialTopTabNavigator，我需要为不同的语言翻译选项卡名称。

我尝试使用useNAvigation，withTranslation但似乎我无权访问 i18nextt函数进行翻译。

const Stack = createStackNavigator();

const Router = () => {
  const Tab = createMaterialTopTabNavigator();
  function MyAdsTabs() {
    return (
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: colors.darkGray,
          labelStyle: {fontSize: 12},
          style: {backgroundColor: colors.white, borderTopWidth: 0, elevation: 0, shadowOpacity: 0},
        }}>
        <Tab.Screen
          name="MyActiveAds"
          component={MyActiveAds}
          options={{tabBarLabel: 'MyActiveAds'}}
        />
        <Tab.Screen
          name="MyDeactiveAds"
          component={MyDeactiveAds}
          options={{tabBarLabel: 'MyDeactiveAds'}}
        />
      </Tab.Navigator>
    );
  }

  function MainStackScreen() {
    return (
      <Stack.Navigator initialRouteName={'Splash'} headerMode="none">
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Setting" component={Setting} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="Terms" component={Terms} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="EditProfile" component={EditProfile} />
        <Stack.Screen name="Search" component={Search} />
        <Stack.Screen name="FavouriteAds" component={FavouriteAds} />
        <Stack.Screen options={{title: 'My home'}} name="MyAdsTabs" component={MyAdsTabs} />
      </Stack.Navigator>
    );
  }

  renderLoading = () => (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>KojaChera</Text>
      <ActivityIndicator size="large" color={colors.darkerTeal} />
    </View>
  );

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor} loading={this.renderLoading()}>
        <Root>
          <NavigationContainer>
            <MainStackScreen />
          </NavigationContainer>
        </Root>
      </PersistGate>
    </Provider>
  );
};

export default Router;

这是我的 package.json 的一部分：

"react": "16.11.0",
"react-i18next": "^11.3.4",
"react-native": "0.62.2",
"@react-native-community/masked-view": "^0.1.9",
"@react-navigation/material-top-tabs": "^5.1.14",
"@react-navigation/native": "5.2.3",
"@react-navigation/stack": "5.2.18",
"i18next": "^19.4.2",

标签： react-nativereact-navigationi18nextreact-i18next

Answer 1

我通过将 i18n 作为道具传递给我的路由器组件来解决它

const App = () => {

  return(
    <I18nextProvider i18n={ i18n }>
      <Router i18n={ i18n } />
    </I18nextProvider>
  );
}

并以这种方式使用它：

<Tab.Screen name="MyDeactiveAds" component={MyDeactiveAds} 
            options={{ tabBarLabel: i18n.t('myAds:inActiveAds')  }}/>