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

Question

I have 3 pages that will be interacting with each other. a Login page, a Settings page, and a HomeScreen page. The login page contains a toolbar which has a clickable back arrow image(uses goBack()) and a clickable settings image which redirects to a settings page where a language can be picked.

There is no problem detecting a language change on the settings page because state is updated upon a change in language. However, if the user taps the backarrow image, the login page does NOT detect a change in state. How do I make sure that the login page can detect if the language has been changed(on the Settings page)?

I found on question that is similar to my problem here however, the answer provided uses navigate, whereas I'm using goBack. I know they're similar, but I'm unsure as to how/where I could pass a callback function on my settings page, and where to use refresh() on my Login page.

I use this method on my Login page

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

            })
        }); 

    }

On my Settings page:

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

and then

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

Use redux for global states like language in your example. It's just much simpler. If you have like 30 screens in your app, and every screen must display texts in correct language, this means that you have to send language back and forth between 30 screens, that's just horrible. redux is a state container, it's strongly recommended that you put those global states (states that many screens share) in redux and send them to each screen. If you don't know how to use redux yet, don't worry, it's not hard to understand, there're plenty good tutorials online. Here is the LanguagePickerExample I wrote for this question using redux , simply

npm install

or

yarn

then

react-native link

The result looks like this: