React Native 中如何使用 Codegen？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. Codegen 的作用

Codegen 是 React Native 中的一个工具，用于自动生成 JavaScript 和原生代码之间的接口。它通过解析 JavaScript 端的类型定义，生成对应的原生代码，从而简化了原生模块的开发过程。

2. 配置项目

在 React Native 0.68 及以上版本中，Codegen 默认启用。如果你的项目使用的是较旧的版本，可能需要手动启用 Codegen。你可以在 react-native.config.js 文件中添加以下配置：

module.exports = {
  codegen: {
    enabled: true,
  },
};

3. 定义接口

在 JavaScript 端，你需要使用 TypeScript 或 Flow 定义接口。例如：

interface MyModule {
  doSomething(): void;
}

4. 生成代码

运行以下命令来生成原生代码：

npx react-native codegen

生成的代码将位于 ios 和 android 目录下的 build/generated 文件夹中。

5. 集成生成的代码

将生成的代码集成到你的原生项目中。例如，在 iOS 项目中，你需要将生成的 .h 和 .m 文件添加到 Xcode 项目中。在 Android 项目中，你需要将生成的 .java 文件添加到 src/main/java 目录中。

6. 使用生成的代码

在原生代码中，你可以使用生成的接口来与 JavaScript 进行交互。例如，在 iOS 中：

// www.javascriptcn.com code example
#import "MyModule.h"

@implementation MyModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(doSomething) {
  // 实现方法
}

@end

在 Android 中：

// www.javascriptcn.com code example
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyModule extends ReactContextBaseJavaModule {

  public MyModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "MyModule";
  }

  @ReactMethod
  public void doSomething() {
    // 实现方法
  }
}

通过以上步骤，你可以在 React Native 项目中使用 Codegen 来自动生成原生代码，并简化原生模块的开发过程。

React Native 中如何使用 Codegen？

推荐答案