react-native调用Android的原生方法

对于从前端转型研究RN的小伙伴们不可避免的就是对Android原生的调用，对于没有接触过Android的来说这是困难重重，这篇文章是我用RN调用原生的一些总结，希望对大家有所帮助。

1、初始化一个RN项目用来测试

react-native init rnAndroid --version 0.46.1

2、首先运行程序确保RN项目可以运行

react-native run-android

3、创建一个原生模块

首先我们需要创建一个原生模块，这个原生模块是一个继承ReactContextBaseJavaModule的Java类,它可以实现一些JavaScript所调用的原生功能。

用Android Studio打开根目录下\android\app\src\main\java\com.rnandroid包，新建一个rntest的文件夹，在该文件夹下新建名为RnTest的Java文件，文件中写以下代码

public class RnTest extends ReactContextBaseJavaModule {
  public RnTest(ReactApplicationContext reactContext) {
    super(reactContext);
  }
  // ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串
  // 这个字符串用于在JavaScript端标记这个原生模块
  @Override
  public String getName() {
    return "ToastByAndroid";
  }
  // 获取应用包名
  // 要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod
   @ReactMethod
   public void getPackageName() {
     String name = getReactApplicationContext().getPackageName();
     Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show();
    }
}

写入后会出现一些代码报红的错误，这是因为没有引包导致的，引包可以将光标放在报红的代码处按下 Alt+Enter 键引入

4、注册模块

要使JavaScript端调用到原生模块还需注册这个原生模块。需实现一个类实现ReactPackage接口，并实现其中的抽象方法

在和RnTest的Java文件同级的位置新建名为ExampleReactPackage的Java文件，文件中写入以下代码

public class ExampleReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      List<NativeModule> modules = new ArrayList<>();
      modules.add(new RnTest(reactContext));
      return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      return Collections.emptyList();
    }

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

注意报红错的还是按Alt+Enter 键引入

除了上面的步骤意外，还需在MainApplication.java文件中的getPackages方法中，实例化上面的注册类

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ExampleReactPackage()//加入这一行
      );
    }

注意报红错的还是按Alt+Enter 键引入

5、Js中调用Android原生方法

引入NativeModules模块

import { NativeModules } from 'react-native';

再在需要调用原生方法的位置写上以下代码调用定义的方法：

var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.getPackageName();

到此就可以实现从RN调用原生Android中的方法了。