React-native插件开发(Android篇)

https://www.njleonzhang.com/2018/08/30/react-native-modules.html

一，新建demo项目

1，安装环境

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

2，创建HelloWorld（demo）

$ react-native init AwesomeProject

如果命令行出现卡顿在这个位置，请移步：https://www.devdo.net/%E8%A7%A3%E5%86%B3react-native-init-%E5%88%9D%E5%A7%8B%E5%8C%96%E6%97%B6-info-installing-required-cocoapods-dependencies/

info Installing required CocoaPods dependencies

3，编译并运行 React Native 应用

$ cd AwesomeProject
$ react-native run-android

如果运行不起来，如下：

 

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

 

用Android studio打开/Users/z/code/rntest/AwesomeProject/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的进程全部关闭。然后重新打开，重新运行。