如何更改语言并同时导航到另一个页面？

Question

开发了一个负责选择应用程序语言的 redux，我在更改语言和单击一次导航到另一个页面时遇到了一些困难。需要点击两次：第一次点击：语言更新 - 第二次点击：导航过程。快速上手将受到高度重视。这是源代码：

languageActionTypes.tsx

export const SET_ENGLISH = 'SET_ENGLISH';
export const SET_ARABIC = 'SET_ARABIC';
export const SET_ESPANOL = 'SET_ESPANOL';

languageActionCreator.tsx

import * as languageActionTypes from '../ActionTypes/languageActionTypes';

export const setEnglish = () => {
  const action = {
    type: languageActionTypes.SET_ENGLISH,
  };
  return action;
};

export const setArabic = () => {
  const action = {
    type: languageActionTypes.SET_ARABIC,
  };
  return action;
};

export const setEspanol = () => {
  const action = {
    type: languageActionTypes.SET_ESPANOL,
  };
  return action;
};

languageReducer.tsx

import {SET_ENGLISH, SET_ARABIC, SET_ESPANOL} from '../ActionTypes/languageActionTypes';

const initialState = {language: 'en'};

const LanguageReducer = (state = initialState, action: any) => {

  switch (action.type) {
    case SET_ENGLISH:
      return {language: 'en'};
    case SET_ARABIC:
      return {language: 'ar'};
    case SET_ESPANOL:
      return {language: 'sp'};
    default:
      return state;
  }
  
};

export default LanguageReducer;

LanguageSelector.tsx

import React from 'react';
import {SafeAreaView, ImageBackground, Image, Text, View, TouchableOpacity} from 'react-native';
import * as Animatable from 'react-native-animatable';
import {images} from '../../constants';
import styles from './LanguageSelectorStyle';
import {connect} from 'react-redux';
import {setEnglish, setArabic, setEspanol} from '../../store/Actions/languageActionCreator.tsx';
import '../../assets/i18n/i18n';
import {useTranslation} from 'react-i18next';

const LanguageSelector = ({navigation, language, makeEnglish, makeArabic, makeEspanol}: any) => {
  
  const {i18n} = useTranslation();

  const transEnglish = () => {
    i18n
      .changeLanguage(language)
      .then(() => {
        makeEnglish();
        language === 'en' && navigation.navigate('RegistrationLogin');
      })
      .catch(err => console.log(err));
  };

  const transArabic = () => {
    i18n
      .changeLanguage(language)
      .then(() => {
        makeArabic();
        language === 'ar' && navigation.navigate('RegistrationLogin');
      })
      .catch(err => console.log(err));
  };

  const transEspanol = () => {
    i18n
      .changeLanguage(language)
      .then(() => {
        makeEspanol();
        language === 'sp' && navigation.navigate('RegistrationLogin');
      })
      .catch(err => console.log(err));
  };

  return (
    <SafeAreaView>
      <ImageBackground style={styles.backgroundImage} source={images.backgroundImage} resizeMode="cover">
        <View style={styles.content}>
          <Image style={styles.appLogo} source={images.fullDTTLogo} resizeMode="contain" />
          <View style={styles.actionView}>
            <Animatable.View
              animation="bounceInUp"
              iterationCount={1}
              iterationDelay={500}
              direction="alternate">
              <TouchableOpacity 
                style={styles.actionBtn}
                onPress={() => {transEnglish()}}>
                <Text style={styles.actionTxtBtn}>English</Text>
              </TouchableOpacity>
            </Animatable.View>
            <Animatable.View
              animation="bounceInUp"
              iterationCount={1}
              iterationDelay={1000}
              direction="alternate">
              <TouchableOpacity 
                style={styles.actionBtn}  
                onPress={() => {transArabic()}}>
                <Text style={styles.actionTxtBtn}>Arabic</Text>
              </TouchableOpacity>
            </Animatable.View>
            <Animatable.View
              animation="bounceInUp"
              iterationCount={1}
              iterationDelay={1500}
              direction="alternate">
              <TouchableOpacity 
                style={styles.actionBtn}
                onPress={() => {transEspanol()}}>
                <Text style={styles.actionTxtBtn}>Espanol</Text>
              </TouchableOpacity>
            </Animatable.View>
          </View>
        </View>
      </ImageBackground>
      {console.log('Language:', language)}
    </SafeAreaView>
  );
  
};

const mapStateToProps = (state: any) => {
  return {
    language: state.LanguageReducer.language,
  };
};

const mapDispatchToProps = (dispatch: any) => ({
  makeEnglish: () => dispatch(setEnglish()),
  makeArabic: () => dispatch(setArabic()),
  makeEspanol: () => dispatch(setEspanol()),
});

export default connect(mapStateToProps, mapDispatchToProps)(LanguageSelector);

Answer 1

如果我理解你的要求正确，你能扩展翻译功能以包括导航调用吗？

而不是

onPress={() => {transArabic()}}>

你可以试试

onPress={() => {
  transArabic();
  navigation.navigate('someScreen');
}}>

如何更改语言并同时导航到另一个页面？

How Can I Change The Language & Navigate To Another Page Simultaneously?

mobile

i18next

react-native

react-redux

react-i18next