深入剖析：React Native开发原生模块的奥秘

2023-12-24 08:05:49

React Native 原生模块开发指南

React Native 原生模块简介

React Native 原生模块是使用 JavaScript 或原生平台语言（Objective-C/Java）编写的，用于与原生平台（Android/iOS）交互。它们充当桥梁，连接 JavaScript 代码和原生功能，使开发者能够访问平台特定服务。

原生模块开发步骤

创建原生模块项目
创建 JavaScript 和原生平台代码文件
实现模块功能逻辑（JavaScript/原生平台）
将模块注册到 React Native 应用
在应用中使用原生模块功能

实战：创建对话框原生模块

1. 创建原生模块项目

使用 React Native CLI 创建：npx react-native init MyNativeModule

2. 创建代码文件

JavaScript：MyNativeModule.js
原生平台（iOS）：MyNativeModule.m
原生平台（Android）：MyNativeModule.java

3. 实现功能逻辑

JavaScript ：

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

export default {
  showAlert(title, message) {
    MyNativeModule.showAlert(title, message);
  },
};

iOS (Objective-C) ：

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(showAlert:(NSString *)title message:(NSString *)message) {
  // 实现原生对话框逻辑
}

Android (Java) ：

public class MyNativeModule extends ReactContextBaseJavaModule {

  @ReactMethod
  public void showAlert(String title, String message) {
    // 实现原生对话框逻辑
  }
}

4. 注册模块

在 React Native 应用的 App.js 中：

import MyNativeModule from './MyNativeModule';

const App = () => {
  const showAlert = () => {
    MyNativeModule.showAlert('标题', '消息');
  };

  return (
    <Button title="显示对话框" onPress={showAlert} />
  );
};

export default App;