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的进程全部关闭。然后重新打开，重新运行。
