原生模块简介
原生模块(Native Module)和原生组件(Native Components)是我们在旧架构中使用的稳定技术。 当新架构稳定后,它们将在未来被弃用。新架构使用 Turbo Native Module 和 Fabric Native Components 来实现类似的效果。
有时 React Native 应用需要访问 JavaScript 默认未提供的原生平台 API,例如访问 Apple Pay 或 Google Pay 的原生 API。或者你可能希望复用现有的 Objective-C、Swift、Java 或 C++ 库,而不是用 JavaScript 重新实现它们;又或者你需要编写一些高性能、多线程的代码来处理图片等任务。
NativeModule 系统会将 Java/Objective-C/C++(原生)类的实例以 JavaScript(JS)对象的形式暴露给 JS,这样你就可以在 JS 中执行任意原生代码。虽然我们并不期望这会成为日常开发流程的一部分,但具备这种能力是非常重要的。如果 React Native 没有导出你的 JS 应用所需的某个原生 API,你应该能够自己把它导出来。
原生模块的设置方式
为 React Native 应用编写原生模块有几种不同方式:
- 创建一个可在 React Native 应用中导入的本地库。更多信息请参阅创建本地库。
- 直接在 React Native 应用的 iOS/Android 工程中实现。
- 作为 NPM 包发布,供你的应用或其他 React Native 应用安装为依赖。
本指南会先带你了解如何直接在 React Native 应用内部实现一个原生模块。不过,接下来指南中构建出的原生模块也可以作为 NPM 包分发。如果你对此感兴趣,请参阅将原生模块设置为 NPM 包指南。
开始上手
在接下来的章节中,我们会带你一步步在 React Native 应用内部直接构建一个原生模块。前提是你需要先有一个 React Native 应用可供操作。如果你还没有,可以按照这里的步骤先创建一个 React Native 应用。
假设你想在 React Native 应用的 JavaScript 中访问 iOS/Android 的原生日历 API,以创建日历事件。React Native 并没有暴露一个可直接与原生日历库通信的 JavaScript API。不过,通过原生模块,你可以编写与原生日历 API 通信的原生代码,然后在 React Native 应用的 JavaScript 中调用它。