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

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

使用i18n和Expo更改应用语言时，如何强制整个应用重新渲染？

1 个答案: