【React Native入门教程】原生模块

在React Native中，原生模块是使用JavaScript调用原生平台功能的接口。以下是创建一个简单的原生模块的步骤：

1. 创建一个原生模块类。
2. 暴露一个方法给JavaScript。
3. 注册模块。

以下是一个简单的例子，展示了如何创建一个原生模块，该模块提供一个方法来显示一个原生提示框(Toast)：

// Android原生模块示例
 
// 1. 创建一个ReactContextBaseJavaModule的子类
public class ToastModule extends ReactContextBaseJavaModule {
 
    // 2. 添加一个显示Toast的方法
    public void showToast(String message) {
        Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
    }
 
    // 3. 注册模块，提供一个名字给JavaScript
    public ToastModule(ReactApplicationContext context) {
        super(context);
    }
 
    @Override
    public String getName() {
        return "ToastAndroid"; // 这个名字用于JavaScript端引用
    }
 
    // 4. 注册方法
    @ReactMethod
    public void show(String message) {
        showToast(message);
    }
}
 
// 注册模块
public class MainApplication extends Application implements ReactApplication {
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
 
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new MyReactPackage() // 添加自定义的ReactPackage
      );
    }
  };
 
  // 创建一个ReactPackage实例
  public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      List<NativeModule> modules = new ArrayList<>();
      modules.add(new ToastModule(reactContext)); // 添加Toast模块
      return modules;
    }
 
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Collections.emptyList();
    }
  }
 
  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

在JavaScript中使用这个模块：

// JavaScript端使用原生模块
import { NativeModules } from 'react-native';
 
NativeModules.ToastAndroid.show('Hello, Android!');

这个例子展示了如何创建一个简单的原生模块，并在Android应用中注册它。然后，你可以在React Native的JavaScript代码中通过名字引用并使用这个模块提供的功能。这只是创建原生模块的一个基本例子，实际的模块可能会更复杂，包含多个方法和参数。