Android设备上需要React-Native和Intl polyfill

Question

我最近更新了我的Android Studio和许多组件/ sdk,从那以后React-Intl抱怨intl库丢失,即使它之前工作正常.

我已经安装了intlpolyfill,我将它导入到我的主文件的最顶层App.js.我也导入localeData从react-intl和添加.然后,我在IntlProvider指定locale没有消息的情况下渲染我的视图(我FormattedNumber现在只使用)

这是我的代码的简化版本:

import 'intl';
import { IntlProvider, FormattedNumber, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';

addLocaleData(en);

[...]

render() {
    return (
        <IntlProvider locale="en">
            <Text>
                <FormattedNumber value={123} />
            </Text>
        </IntlProvider>
    )
}

我收到以下错误:

[React Intl]错误格式化编号.ReferenceError:尚未为此对象提供语言环境数据.

我不明白发生了什么.有人遇到同样的问题吗？

谢谢

Answer 1

react-intl我没有从中导入语言环境数据,而是解决了导入polyfill和语言环境数据的问题intl

安装 intl

npm install intl

在应用的最顶部添加:

import 'intl';
import 'intl/locale-data/jsonp/en';

Answer 2

修改“build.gradle”

在 Android 上，您可以修改 /android/app/build.gradle 中的“build.gradle”文件。请记住，它不是 /android/app/gradle/build.gradle 中的文件。

然后，转到站点文件并搜索：

      /**
     * JavaScriptCore 的首选构建风格。
     *
     * 例如，要使用国际变体，您可以使用：
     * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
     *
     * 国际版本包括 ICU i18n 库和必要的数据
     * 允许使用例如`Date.toLocaleString`和`String.localeCompare`
     * 在使用 en-US 以外的语言环境时给出正确的结果。注意
     * 此变体每个架构比默认值大大约 6MiB。
     */
     def jscFlavor = 'org.webkit:android-jsc:+'

现在，修改最后一行，或者简单地将其注释掉并复制并粘贴上面的类似行。结果将是这样的：

      /**
     * JavaScriptCore 的首选构建风格。
     *
     * 例如，要使用国际变体，您可以使用：
     * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
     *
     * 国际版本包括 ICU i18n 库和必要的数据
     * 允许使用例如`Date.toLocaleString`和`String.localeCompare`
     * 在使用 en-US 以外的语言环境时给出正确的结果。注意
     * 此变体每个架构比默认值大大约 6MiB。
     */
     //def jscFlavor = 'org.webkit:android-jsc:+'
     def jscFlavor = 'org.webkit:android-jsc-intl:+'

Answer 3

抬头,现在只需执行import 'intl';顶部并仍然加载来自的语言环境数据react-intl.使用以下版本:

"intl": "^1.2.5",
"react-intl": "^2.2.2",

Answer 4

更新到 React Native 0.65 或更高版本

最后，“intl”现已包含在 Hermes 中，它随 React Native 0.65 或更高版本一起提供 -更多内容请参阅 React Native 博客