Skip to main content

原生模块 NPM 包设置

信息

Native Module 和 Native Components 是我们旧版架构使用的稳定技术。当新架构稳定后,它们将被弃用。新架构使用 Turbo Native 模块Fabric 原生组件 来实现类似的结果。

¥Native Module and Native Components are our stable technologies used by the legacy architecture. They will be deprecated in the future when the New Architecture will be stable. The New Architecture uses Turbo Native Module and Fabric Native Components to achieve similar results.

原生模块通常作为 npm 包分发,除了通常的 JavaScript 之外,它们还将包含每个平台的一些原生代码。要了解有关 npm 包的更多信息,你可能会发现 本指南 很有用。

¥Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find this guide useful.

为了设置原生模块的基本项目结构,我们将使用名为 create-react-native-library 的社区工具。你可以进一步深入了解该库的工作原理,但根据我们的需要,我们将只执行基本脚本:

¥To get set up with the basic project structure for a native module we will use the community tool called create-react-native-library. You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic script:

npx create-react-native-library@latest react-native-awesome-module

其中 react-native-awesome-module 是你想要的新模块的名称。执行此操作后,你将导航到 react-native-awesome-module 文件夹并通过运行以下命令引导示例项目:

¥Where react-native-awesome-module is the name you would like for the new module. After doing this you will navigate into react-native-awesome-module folder and bootstrap the example project by running:

yarn

引导完成后,你将能够通过执行以下命令之一来启动示例应用:

¥When the bootstrap is done, you will be able to start the example app by executing one of the following commands:

# Android app
yarn example android
# iOS app
yarn example ios

完成上述所有步骤后,你将能够继续使用 Android 原生模块iOS 原生模块 指南来添加一些代码。

¥When all steps above are done, you will be able to continue with Android Native Modules or iOS Native Modules guides to add in some code.