Native Modules实战攻略：从零到精通的关键技术解析

直接上手，Native Modules怎么用

大家好，今天要跟大家分享的是Native Modules的使用。废话不多说，先看代码。

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.getStringFromNative()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

这段代码展示了如何在React Native中调用一个Native Module。简单来说，就是通过NativeModules这个对象来访问我们在原生代码中定义的方法。

配置你的Native Module

首先，你需要在原生代码中定义一个模块。这里以Android为例，iOS的配置类似。

创建Java文件

在Android项目中，找到app/src/main/java/包名目录，创建一个新的Java文件，比如MyNativeModule.java。

package com.example.myapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

public class MyNativeModule extends ReactContextBaseJavaModule {

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

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

  @ReactMethod
  public void getStringFromNative(Callback callback) {
    callback.invoke("Hello from Native Code!");
  }
}

注册模块

接下来，你需要在MainApplication.java中注册这个模块。

import com.example.myapp.MyNativeModule; // 导入你创建的类

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new ReactPackage() {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
          return Arrays.<NativeModule>asList(new MyNativeModule(reactContext));
        }

        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
          return Collections.emptyList();
        }
      }
  );
}

踩坑提醒：这三点一定注意

在实际使用过程中，有几个坑点需要注意：

• 名称冲突：确保你的Native Module名称不会与现有的模块冲突。如果出现冲突，可能会导致你的方法无法被正确调用。
• 线程问题：如果你的Native方法需要在主线程之外执行，记得使用runOnUiThread或者Handler来处理，否则可能会导致UI卡顿或者崩溃。
• 错误处理：在调用Native方法时，一定要处理好异常情况。可以使用Callback来传递错误信息，或者抛出一个异常来中断执行。

高级技巧：传递复杂数据结构

有时候我们需要从JavaScript传递复杂的对象到Native，或者从Native返回复杂的对象到JavaScript。这时候可以使用WritableMap和ReadableMap来处理。

传递复杂对象

假设我们要从JavaScript传递一个包含多个字段的对象到Native：

const params = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown'
  }
};

MyNativeModule.processComplexObject(params)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

在Native端，你可以这样处理：

@ReactMethod
public void processComplexObject(ReadableMap params, Callback callback) {
  String name = params.getString("name");
  int age = params.getInt("age");

  ReadableMap address = params.getMap("address");
  String street = address.getString("street");
  String city = address.getString("city");

  // 处理逻辑
  WritableMap result = Arguments.createMap();
  result.putString("response", "Processed successfully");

  callback.invoke(null, result);
}

总结一下

以上就是Native Modules的一些基本用法和一些常见的坑点。Native Modules是React Native中非常强大的功能，可以帮助你在应用中实现很多原生功能。希望这些经验对你有帮助。

这个技术的拓展用法还有很多，后续我会继续分享这类博客。如果你有更好的实现方式或者遇到什么问题，欢迎在评论区交流。