Javascript React Native-如何将本地化与React导航结合使用，以便跨屏幕访问翻译？

我正在尝试使用本地化在我正在组装的应用程序中提供多种语言选项。我正在使用

react导航

浏览不同的屏幕，我想使用

expo本地化

访问本地语言设置。我已经看过了，我不知道如何将其集成到我的导航中。如何在不同屏幕中访问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);

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

import React，{Component}来自'React'；
从“反应导航选项卡”导入{CreateBoottomTabNavigator}
从“反应导航”导入{createAppContainer，createSwitchNavigator}；
从“@expo/vector icons”导入{Ionicons}；
从'react redux'导入{Provider}；
从“redux”导入{createStore}；
从“/store/reducer”导入我们的reducer；
const store=createStore（ourReducer）；
global.x=https://volleybuddy.metis-data.site'
从“./components/Home”导入主页
从“./components/Profile”导入配置文件
从“./components/Login”导入登录名
从“./components/SignUp”导入注册
从“./components/StartScreen”导入StartScreen
//导入语言设置
从“世博会本地化”导入*作为本地化；//或者任何你想要的图书馆
从“i18n js”导入i18n；//或者任何你想要的图书馆
常数en={
登录：“登录”
};
常数={
登录名：“Entre”
};
i18n.回退=真；
i18n.translations={es，en}；
//这将为我记录“en”，因为我是一个说英语的人
console.log（本地化.locale）；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const bottomTabNavigator=createBottomTabNavigator(
{
主页：{
屏幕：主页，
导航选项：{
tabBarIcon:（{tintColor}）=>(
// 
)
}
},
简介：{
屏幕：配置文件，
导航选项：{
tabBarIcon:（{tintColor}）=>(
// 
)
}
},
},
{
initialRouteName:“主页”，
选项卡选项：{
activeTintColor:“#eb6e3d”
}
}
);
const RootSwitch=createSwitchNavigator（{
StartScreen，
报名，
登录，
底部选项卡导航器
});
const-AppContainer=createAppContainer（RootSwitch）；

Login.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);

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

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图}；
类StartScreen扩展组件{
render（）{
{这里我将在这里传递值}
}
}
导出默认StartScreen

例如在App.js make中：

const en = {
 login: 'Heloooooooo'
};   

在StartScreen中：

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

从“i18n js”导入i18n；
{i18n.t（'login'）}//输出为：heloooo