如何使用 React Native 创建本地化？

Question

我正在为 react native 进行本地化，这是我目前所做的

import React, { useState, useContext } from 'react'
import { Platform, NativeModules } from 'react-native'
import PropTypes from 'prop-types'

const languageJson = require('../../language.json')

const deviceLanguage =
    Platform.OS === 'ios'
        ? NativeModules.SettingsManager.settings.AppleLocale
        : NativeModules.I18nManager.localeIdentifier

export const LanguageContext = React.createContext(deviceLanguage)

export const T = ({ children }) => {
    const { language } = useContext(LanguageContext)
    if (!children) return ''
    let res =
        languageJson[children] && languageJson[children][language]
            ? languageJson[children][language]
            : languageJson[children]['en_US']
    return res
}

export const t = string =>
    languageJson[string] && languageJson[string][deviceLanguage]
        ? languageJson[string][deviceLanguage]
        : languageJson[string]['en_US']

export default function Language({ children }) {
    const [language, setLanguage] = useState(deviceLanguage)

    const t = key => {
        let string =
            languageJson[key] && languageJson[key][language]
                ? languageJson[key][language]
                : languageJson[key]['en_US']

        if (string) return string
        throw Error(`Key ${key} not found`)
    }

    return (
        <LanguageContext.Provider value={{ language, setLanguage, t }}>
            {children}
        </LanguageContext.Provider>
    )
}

Language.propTypes = {
    children: PropTypes.node,
}

所以在这段代码中，我读取了一个 json 文件并获取设备语言来读取字符串。

因为我使用上下文来传递设备语言，但这就是问题的开始。

在某些情况下，我需要 a 字符串，但它不在组件内，所以我创建了函数 t（即在组件外），但是当 language 更改时，t 不会t 改变，因为它不在上下文中，而且我也不能在不是反应组件的函数中使用上下文。

如何实现这个t函数，既能看到设备语言的变化，又能与上下文协同工作？

Answer 1

在本地化可用的 react 原生节点包中

https://github.com/AlexanderZaytsev/react-native-i18n

例子：

import I18n from 'react-native-i18n';

I18n.t('name');