反应导航如何更改底部选项卡的语言

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
}));

应用程序.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 来翻译组件，它们工作得很好。但是我得到了由世博会生成的底部标签。我不知道如何翻译我在上面的库中尝试过的那些标签，似乎不起作用。

标签看起来像这样

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} 
      />
  ),
});

我希望它对你有帮助。如果您需要更多解释，请告诉我。