向 React Native 项目添加 ES7 装饰器支持 [英] Adding ES7 Decorator support to a React Native project

问题描述

我想允许我的 React Native 应用程序使用 Decorators，但我该如何实现?

I want to allow for my React Native application to use Decorators, but how do I achieve this?

在 React 中，这很简单:

In React, it's pretty simple:

1. 我跑了yarn run eject
2. 我修改了 webpack.config.*.js 并添加了 plugins: ['transform-decorators-legacy']

1. I ran yarn run eject
2. I modified webpack.config.*.js and added plugins: ['transform-decorators-legacy']

如何使用 react-native 实现类似的功能?我通过 react-native CLI 实例化了我的项目 - react-native init AwesomeApp.

How do I achieve something similar with react-native? I instantiated my project via the react-native CLI - react-native init AwesomeApp.

但是，eject 命令不存在.

推荐答案

当您仅使用 React Native CLI 开发应用程序时，您无权访问诸如 webpack.config.js 之类的配置文件 或 eject 命令.

When you're developing an application using only React Native CLI, you don't have access to configuration files such as webpack.config.js, or an eject command.

但是你可以通过同一个 Babel 插件添加 decorators 支持，只需修改 .babelrc 文件.请按照以下步骤操作:

But you can add decorators support through the same Babel plugin, just by modifying .babelrc file. Follow the steps below:

1. 将插件安装到您的项目中(作为开发依赖项):yarn add --dev babel-plugin-transform-decorators-legacy;
2. 在 .babelrc 文件中声明插件:"plugins": ["transform-decorators-legacy"];

1. Install the plugin to your project (as a dev dependency): yarn add --dev babel-plugin-transform-decorators-legacy;
2. Declare the plugin in your .babelrc file: "plugins": ["transform-decorators-legacy"];

现在，下次启动 packager(或捆绑源)时，React Native 将能够解释您在 JavaScript 文件中使用的装饰器.

Now, next time you start the packager (or bundle the sources), React Native will be able to interpret the decorators you've used in your JavaScript files.

这篇文章中给出的示例正是我上面已经介绍过了.

The example given in this article shows exactly what I have described above.

另外，你可以看看 Haul，一个用于创建 React Native 应用程序的工具使用 webpack.

Also, you might take a look at Haul, a tool for creating React Native apps using webpack.

祝你好运！

这篇关于向 React Native 项目添加 ES7 装饰器支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！