Question

我必须不明确，但这已经过去了。

我正在尝试在当前正在运行的应用程序项目中实现react-native-localize。首先：我遵循this guide是因为react-native和＆react-native-localize对我来说是很新的。它工作正常，我对它如何工作有了了解。

我需要在另一个正在进行的项目中实现本地化依赖。该项目有多个屏幕，因此，我想知道应该如何设置或最佳实践以使其最容易地导入到所需的所有文件中。

代码和设置我可以在上面前面提到的指南中找到。我在App.js中具有以下代码，但我想将其拆分为可在多个屏幕上重用的代码，并且可以生成整个应用程序。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  I18nManager,
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import * as RNLocalize from 'react-native-localize';
import i18n from 'i18n-js';
import memoize from 'lodash.memoize';

const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  // ISO-639 
  da: () => require('./src/translations/da.json'),
  en: () => require("./src/translations/en.json"),
};

const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)
);

const setI18nConfig = () => {
  // fallback if no available language fits
  const fallback = { languageTag: "en", 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 default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // set initial config
  }

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

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

  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <Text style={styles.value}>{translate("hello")}</Text>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  value: {
    fontSize: 18
  }
});

我需要导入什么，并且谁可以在多个屏幕上使用？

确保您中的某些人已经使用它，并且可以提供一些指导方针或其他任何方法

反应本机&& react-native-localize

0 个答案: