ReactNative原生Android library库开发

安装

$ 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. 创建库项目

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

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

2. 编写库Module

进入创建好的library目录，找到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后面带的是library目录相对当前项目的路径。然后cd到项目根目录，执行

$ yarn

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

6. 运行

$ react-native run-android

7. 更新Library

每次更新library代码，都需要将项目的链接清除，然后再重新链接。最好是清除缓存。

方法一：

进入项目根目录

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

进入到library目录

$ yarn unlink

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

$ rm -rf node_modules

需要重新链接。

$ yarn

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

方法二：

进入项目根目录

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

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

$ rm -rf node_modules

需要重新链接。

$ yarn

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

发布库到npm仓库

上传library到你的GitHub仓库，并记录你的仓库地址，下面要用。

在library的package.json编写你的发布信息，按照如下格式编写：

 {
   "name": "react-native-my-library",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
     "react-native",
   ],
   "author": {
     "name": "xiaoming",
     "email": "[email protected]"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "[email protected]:xiaoming/react-native-my-library.git"
   },
   "devDependencies": {
     "react": "^16.2.0",
     "react-native": "^0.53.0"
   },
   "peerDependencies": {
     "react": "^16.2.0"
   },
   "dependencies": {
     "prop-types": "^15.6.0"
   }
 }

选择npm镜像源为官方地址：

 $ npm config set registry http://registry.npmjs.org/

登录npm账号，如果没有自行去官网注册。
```
 $ npm login
```
首次发布
```
 $ npm publish
```
更新发布

<update_type>

patch 修复bug、微小改动时从版本号第3位开始增量变动 1.0.0 -> 1.0.1

minor 上线新功能，并且对当前版本已有功能模块不影响时从版本号第2位开始增量变动 1.0.3 -> 1.1.3

major 上线多个新功能模块，并且对当前版本已有功能会有影响时从版本号第1位开始增量变动 1.0.3 -> 2.0.0
```
 $ npm version <update_type>

 $ npm publish
```

配置中出现的问题：

1. 找不到包引用

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