ReactNative插件开发

安装

$ npm install -g yarn react-native-cli
$ npm install -g react-native-create-library

创建HelloWorld

$ react-native init AwesomeProject

编译并运行 React Native 应用

$ cd AwesomeProject
$ react-native run-android

步骤

1. 创建插件项目

选择一个额外的目录，开始创建插件。

react-native-create-library --package-identifier com.reactlibrary --platforms android,ios MyLibrary

2. 编写插件Module

进入创建好的插件目录，找到xxxModule.java的文件，该Module它可以实现一些JavaScript所需的功能。

package com.reactlibrary;

import android.widget.Toast;

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

import java.util.HashMap;
import java.util.Map;

import javax.annotation.Nullable;

public class RNMyLibraryModule extends ReactContextBaseJavaModule {

  private final ReactApplicationContext reactContext;
  private static final String DURATION_SHORT_KEY = "SHORT";
  private static final String DURATION_LONG_KEY = "LONG";

  public RNMyLibraryModule(ReactApplicationContext reactContext) {
    super(reactContext);
    this.reactContext = reactContext;
  }

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

  @Nullable
  @Override
  public Map<String, Object> getConstants() {
    Map<String, Object> constants = new HashMap<>();
    constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
    constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
    return constants;
  }

  @ReactMethod
  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
  }
}

getName()这个函数用于返回一个字符串名字，这个名字在 JavaScript 端标记这个模块。
getConstants()返回了需要导出给 JavaScript 使用的常量，它并不一定需要实现。
注解@ReactMethod，用于提供给JavaScript调用的方法，方法的返回类型必须为void。React Native 的跨语言访问是异步进行的，所以想要给 JavaScript 返回一个值的唯一办法是使用回调函数或者发送事件。

3. 编写插件Package

注册这个模块。我们需要在应用的 Package 类的createNativeModules方法中添加这个模块。

package com.reactlibrary;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;

public class RNMyLibraryPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      return Arrays.<NativeModule>asList(new RNMyLibraryModule(reactContext));
    }

    // Deprecated from RN 0.47
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      return Collections.emptyList();
    }

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

4. 编写index.js，用于返回native模块

import { NativeModules } from 'react-native';

const { RNMyLibrary } = NativeModules;

export default RNMyLibrary;

其中，RNMyLibrary这个名字需要与Module中getName()返回的字符串相同。

5. 引入插件

方法一：

打开插件目录下package.json，记录name的值。在这里示例为"name": "react-native-my-library"。接下来会link它。

使用命令行终端cd到插件根目录，执行

$ yarn link

cd到项目根目录，执行

$ yarn link "react-native-my-library"

使链接生效。它可以让react native工程中的android和ios原生项目，自动去生成依赖（会在原生项目中生成配置代码）。在项目根目录执行

$ react-native link "react-native-my-library"

方法二：

打开项目目录中的package.json，修改dependencies

"dependencies": {
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.4",
    "react-native-my-library": "file:../MyLibrary"
}

react-native-my-library为插件的name，file后面带的是插件目录相对当前项目的路径。然后cd到项目根目录，执行

$ yarn

$ react-native link "react-native-my-library"

6. 运行

$ react-native run-android

7. 更新Library

每次更新插件代码，都需要将项目的链接清除，然后再重新链接。最好是清除缓存。为了避免说你更新的原生代码没有生效的情况。

方法一：

进入项目根目录

$ react-native unlink "react-native-my-library"
$ yarn unlink "react-native-my-library"

进入到插件目录

$ yarn unlink

修改好插件代码后，然后进入插件根目录，删除node_modules

$ rm -rf node_modules

需要重新链接。

$ yarn

同上【引入插件 一】的说明依次执行。

方法二：

进入项目根目录

$ react-native unlink "react-native-my-library"

修改好插件代码后，然后进入插件根目录，删除node_modules

$ rm -rf node_modules

需要重新链接。

$ yarn

同上【引入插件 二】的说明依次执行。

配置中出现的问题：

1. 找不到包引用

将VSCode和模拟器/命令行终端全部关掉，监听端口8081的进程全部关闭。然后重新打开，重新运行。