Перевести реагировать навигационную вкладку BarLabel в реагировать на родную - PullRequest
Новая
       97

Перевести реагировать навигационную вкладку BarLabel в реагировать на родную

0 голосов
/ 02 мая 2020

У меня есть пара экранов на одном из них. У меня есть materialTopTabNavigator с двумя вкладками, мне нужно перевести названия вкладок для разных языков.

Я пытался использовать useNAvigation и withTranslation, но, похоже, я У меня нет доступа к функции i18next t для перевода. 

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;

, и это часть моего пакета. 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",

1 Ответ

0 голосов
/ 02 мая 2020

я решил это, передав i18n в качестве опоры в мой компонент маршрутизатора 

const App = () => {

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

и использовал его следующим образом: 

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