React Native - 如何使用本地化和 react-navigation 来跨屏幕访问翻译？

Question

我正在尝试使用本地化在我组装的应用程序中提供多种语言选项。我正在使用 react-navigation 在不同的屏幕之间移动，我想使用 expo-localization 来访问本地语言设置。我查看了 documentation，但不确定如何将其集成到我的导航中。我如何在不同的屏幕上访问 Localization.locale 才能显示正确的语言？:

下面是第一个登陆屏幕和我的路由的示例。

App.js

 import React, {Component} from 'react';
    import {createBottomTabNavigator} from 'react-navigation-tabs'
    import { createAppContainer, createSwitchNavigator } from 'react-navigation';
    import { Ionicons } from '@expo/vector-icons';
    import { Provider } from 'react-redux';
    import { createStore } from 'redux';
    
    import ourReducer from './store/reducer';
    const store = createStore(ourReducer);
    global.x = 'https://volleybuddy.metis-data.site'
    
    
    import Home from './components/Home'
    import Profile from './components/Profile'
    import Login from './components/Login'
    import SignUp from './components/SignUp'
    import StartScreen from './components/StartScreen'

    //import language settings
    import * as Localization from 'expo-localization'; // or whatever library you want
    import i18n from 'i18n-js'; // or whatever library you want

    const en = {
    login: 'Login'
    };

    const es = {
    login: 'Entre'
    };

    i18n.fallbacks = true;
    i18n.translations = { es, en };

    // This will log 'en' for me, as I'm an English speaker
    console.log(Localization.locale);
    
    export default class App extends Component {
    
    
      render(){
    
        return (
          
          <Provider store={ store }>
            <AppContainer/>
          </Provider>
        );
        }
    }
    
    const bottomTabNavigator = createBottomTabNavigator(
      {
        Home: {
          screen: Home,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
              <Ionicons  name="ios-home" size={25} color={tintColor}/>
              // <Icon name="qrcode" size={25} color={tintColor} />
            )
          }
        },
        Profile: {
          screen: Profile,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
              // <Icon name="search" size={25} color={tintColor} />
              <Ionicons  name="md-person" size={25} color={tintColor}/>
            )
          }
        },
      },
      {
        initialRouteName: 'Home',
        tabBarOptions: {
          activeTintColor: '#eb6e3d'
        }
      }
    );
    
    const RootSwitch = createSwitchNavigator({ 
      StartScreen,
      SignUp,
      Login,
      bottomTabNavigator
      });
    
    const AppContainer = createAppContainer(RootSwitch);

Login.js

import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';


class StartScreen extends Component {

    render(){
        <View>
            <Text>{HERE I WOULD BE PASSING VALUES HERE}</Text>
        </View>

    }
}

export default StartScreen

Answer 1

例如 App.js make :

const en = {
 login: 'Heloooooooo'
};

并在开始屏幕中：

import i18n from 'i18n-js';
<View>
  {i18n.t('login')} //output is : Heloooooooo
</View>

React Native - 如何使用本地化和 react-navigation 来跨屏幕访问翻译？

React Native - how do I use localization with react-navigation to make translations accessible across screens?

javascript

react-native

localization

expo

translation