android - 我在 react native 中制作了一个按钮来更改应用程序的语言。当我运行应用程序时它工作正常，但它在发布 apk 中不起作用

Question

changeLanguage.js 更改语言屏幕，其中包含更改语言的下拉菜单。当用户选择语言时，将存储在 redux 中并重新启动。

const changeLanguage = (navigation) => {

    const [lang, setlang] = useState("");
    const { theme } = useContext(ThemeContext);
    console.log(lang);

    const onButtonClick = () => {

      if (lang!=""){
        addLanguage(lang);
        // console.log("lang :"+lang);
      }
      RNRestart.Restart();
    };
return (
              <View>
                <DropDownPicker
                        items={[
                            {label: translate("Language.Choose"), value: 'eng', hidden: true},
                            {label: translate("Language.English"), value: 'eng', icon: () => <Icon name="flag" size={18} color="#900" />},
                            {label: translate("Language.Arabic"), value: 'ara', icon: () => <Icon name="flag" size={18} color="#900" />},
                            {label: translate("Language.French"), value: 'fre', icon: () => <Icon name="flag" size={18} color="#900" />},
                        ]}
                        defaultValue='eng'
                        containerStyle={styles.conatinerStyle}
                        style={styles.dropstyle}
                        itemStyle={styles.itemStyle}
                        dropDownStyle={styles.dropDownStyle}
                        // onChangeItem={item => this.setState({country: item.value})}
                        onChangeItem={item => setlang(item.value)}
                />
                <View style={styles.btnView}>
                <Button
                  style={styles.langbtn(theme)}
                  title={translate("Language.UpdateLanguage")}
                  //  title="Update Language"
                  onPress={onButtonClick}
                  type="solid"
                  
                  
                />
                </View>
              </View>




  );
};

export default changeLanguage;

i18n/index.js

export const translationGetters = {
    // lazy requires (metro bundler does not support symlinks)
    eng: () => require('./translations/eng.json'),
    ara: () => require('./translations/ara.json'),
    fre: () => require('./translations/fre.json'),
  };
  
export const translate = memoize(
    (key, config) => i18n.t(key, config),
    (key, config) => (config ? key + JSON.stringify(config) : key)
  );
  
export const setI18nConfig = () => {
  // fallback if no available language fits
  const fallback = { languageTag: 'eng', isRTL: false };

  const { languageTag, isRTL } = 
  RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) || fallback;

  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

export const changeLanguage = (languageTag) => { /* lang='eng' or 'fre' or 'ara' */
    // clear translation cache
    translate.cache.clear();
    // update layout direction
    if (languageTag=='ara'){
      I18nManager.forceRTL(true);
    }
    else{
      I18nManager.forceRTL(false);
    }
    i18n.translations = { [languageTag]: translationGetters[languageTag]() };
    i18n.locale = languageTag;

};

App.js 当 redux 中存储的语言发生变化时，会调用 changeLanguage 来更新语言

export default class App extends React.Component {
  constructor(props) {
    super(props);
    i18n.setI18nConfig();
  }

  
  DummyView = () => {
    var lang = useSelector((state) => state.language.language);
    useEffect(() => {

        
          if(lang !=""){
            i18n.changeLanguage(lang);      
            
          }
      
        
    },[lang])
    return null
}

  componentDidMount() {
    RNLocalize.addEventListener('change', this.handleLocalizationChange);


    
  }

  componentWillUnmount() {
    RNLocalize.removeEventListener('change', this.handleLocalizationChange);

  }

  handleLocalizationChange = () => {
    i18n.setI18nConfig();
    this.forceUpdate();
  };

  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
        <this.DummyView/>
        <ThemeProvider theme={theme}>
            <RootStackScreen/>
        </ThemeProvider>
        </PersistGate>
      </Provider>
    );
  }
}

langaugeActions.js

export const addLanguage = (lang) => {
    store.dispatch({
        type: 'CHANGE_LANGUAGE',
        language: lang,

    })
};

langaugeReducer.js

const INITIAL_STATE = { language:'eng'}

const language = ( state = INITIAL_STATE, action ) => {
    switch(action.type) {
        case 'CHANGE_LANGUAGE':
            return {
                language: action.language,

            };
        
        default:
            return state;
    }
};

标签： androidreact-nativereduxinternationalizationapk