Question

我有3个页面将互相交互。登录页面，“设置”页面和“主页”页面。登录页面包含一个工具栏，其中包含可点击的后退箭头图像（使用goBack（））和可点击的设置图像，该图像重定向到可以选择语言的设置页面。

在设置页面上检测语言更改没有问题，因为状态在语言更改时更新。但是，如果用户点击了后向图像，则登录页面不会检测到状态的变化。如何确保登录页面可以检测语言是否已更改（在“设置”页面上）？

我发现问题类似于我的问题here但是，提供的答案使用导航，而我使用goBack。我知道他们相似，但我不确定如何/在哪里可以在我的设置页面上传递回调函数，以及在我的登录页面上使用refresh（）的位置。

我在登录页面上使用此方法

componentWillMount() {
        AsyncStorage.getItem('language', (err, result) => {
            langCode = result;
            this.setState({
                currLang: result,

            })
        }); 

    }

在我的设置页面上：

onLangChange(value, index){
        Config.langCode = value;
        this.setState({ currLang: Config.langCode });
        AsyncStorage.setItem('language', value)
        console.log( 'here is your new lang ' + Config.langCode);
    }

然后

render(){
        const {navigate} = this.props.navigation;
        const {goBack} = this.props.navigation
        const langText = Config.langText[this.state.currLang];  // Object that has text in current language.

        return(
            <ScrollView style={styles.mainContainer}>
                <View style={styles.headerContainer}>
                    <View style={styles.iconContainer}>
                        <TouchableOpacity onPress={ () => goBack('') } >
                            <Image source={Config.images.leftArrowIcon} style={styles.leftArrowIcon} />
                        </TouchableOpacity>

Answer 1

在您的示例中，将redux用于language等全局状态。这简单得多了。如果您的应用中有30个屏幕，并且每个屏幕都必须以正确的语言显示文本，这意味着您必须在30个屏幕之间来回发送language，这太可怕了。 redux是一个状态容器，强烈建议您将这些全局状态（许多屏幕共享的状态）放在redux中并将它们发送到每个屏幕。如果您还不知道如何使用redux，请不要担心，这并不难理解，网上有很多很好的教程。 Here is the LanguagePickerExample I wrote for this question using redux，只是

npm install

或

yarn

然后

react-native link

结果如下：

在React Native中使用goBack（）时，如何检测语言是否已更改？

1 个答案: