使用 i18n 更改应用语言时如何强制整个应用重新呈现

Question

我的应用程序同时面向阿拉伯语和英语，我正在尝试更改整个应用程序语言并强制整个应用程序更新，包括帮助我在应用程序中同时包含阿拉伯语和英语数字的 FormattedProvider，我将其标签用作我的主要 App.js 应用程序组件的包装器，如下所示：

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 
'react-native';
import * as Expo from 'expo';
import { Constants } from 'expo';
import { FormattedProvider } from 'react-native-globalize';
import InnerApp from './src/App';
import i18n from './src/i18n';    
export default class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {}
    }
    async componentWillMount() {
        await Expo.Font.loadAsync({
            'Roboto': require('native-base/Fonts/Roboto.ttf'),
            'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
            'Ionicons': require('@expo/vector-icons/fonts/Ionicons.ttf'),
            'FontAwesome': require('@expo/vector-icons/fonts/FontAwesome.ttf'),
            'Foundation': require('@expo/vector-icons/fonts/Foundation.ttf'),
            'SimpleLineIcons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
            'EvilIcons': require('@expo/vector-icons/fonts/EvilIcons.ttf'),
            'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
            'FontAwesome5_Regular': require('@expo/vector-icons/fonts/FontAwesome5_Regular.ttf')
       });
    }
    render() {
        return (
            <FormattedProvider locale={this.props.language}>
                <InnerApp />
            </FormattedProvider>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
    },
    paragraph: {
        margin: 24,
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#34495e',
    },
});

我希望当用户选择另一种语言时，整个应用程序的语言会发生变化，任何帮助将不胜感激。

Answer 1

尝试一下：

     constructor(props){
        super(props);
            this.state = {
               language: "en"
            }
}
componentWillReceiveProps(nextProps){
   if (this.props.language != nextProps.language)
       this.setState({language: nextProps.language})
}
render() {
    return (
        <FormattedProvider locale={this.state.language}>
            <InnerApp />
        </FormattedProvider>
    )
}
}

基本上只是尝试从状态中读取语言，以便在更改树时重新呈现树。