反应导航如何更改底部标签的语言

Question

MainTabNavigator.js

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
const ExploreStack = createStackNavigator({
    Explore: ExploreScreen,
});
ExploreStack.navigationOptions = {
    tabBarLabel: 'explore',
    tabBarIcon: ({ focused }) => (
        <MyTabBarIcon style={{width:22, height:21}} name={'explore'} focused ={focused} />
    ),
};
const CarStack = createStackNavigator({
    CarStack: CarScreen,
});

CarStack.navigationOptions = {
    tabBarLabel: 'car',
    tabBarIcon: ({ focused }) => (
        <MyTabBarIcon style={{width:39, height:19}} name={'car'} focused ={focused} />
    ),
};

export default createBottomTabNavigator({
    CarStack,
    ExploreStack,
});

appNavigtor.js

import MainTabNavigator from './MainTabNavigator';
import SignIn from '../screens/SignIn'

export default createAppContainer(createSwitchNavigator({
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  Main: MainTabNavigator,
  SignIn: SignIn
}));

app.js

import AppNavigator from './navigation/AppNavigator';
export default class App extends React.Component {
    render() {
            return (
                <View style={styles.container}>
                    <AppNavigator />
                </View>
            );
        }
}

我正在使用来自'i18n-js'的expo i18n和来自expo的Localization来翻译组件，它们工作得很好。但是我得到了expo生成的bottomtabs。我不知道如何翻译我在上面的库中尝试过的那些标签标签，似乎没有用。

标签看起来像这样

Answer 1

有几种开发方法：

我使用了React-Native-i18n软件包。首先：

npm install react-native-i18n --save

然后，您需要创建本地化文件。如：en.json或fi.json

您应该将翻译添加到这些文件中：

en.json：

{
 "lang": "en",
   "button": {
     "ok": "OK",
     "cancel": "Cancel",
     "close": "Close"
   }
}

和

{
"lang": "fi",
  "button": {
    "ok": "OK",
    "cancel": "Peruuta",
    "close": "Sulje"
   }
}

您需要创建i18n.js文件。 然后在MainTabNavigator.js中：

import I18n from '../i18n'

ExploreStack.navigationOptions = () => ({
   tabBarLabel: I18n.t('button.ok'),
   tabBarIcon: ({ focused }) => (
      <MyTabBarIcon style={{width:22, height:21}} name={'explore'} focused ={focused} 
      />
  ),
});

我希望它能对您有所帮助。让我知道是否需要更多说明。