如何在使用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>
    )
}
}

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