RN调用Java原生方法步骤

RN调用Java原生方法步骤

1.用AS打开一个已存在的项目（新建项目react-native init 名字 ），在项目中选择Android/build.gradle文件（一定要代开Android中APP下的build.gradle文件）

2.在Android/src/main/jaava/com/newtest01下创建MyNativeModule类继承ReactContextBaseModule.这个类是要放需要被RN调用的方法来封装成一个原生模板.代码如下：

package com.newtest01;
import android.content.Context;
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyNativeModule extends ReactContextBaseJavaModule {
private Context mContext;//上下文
public MyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
mContext=reactContext;
}
@Override
public String getName() {
//这个名字是rn通过这个名字用来调用该类的方法
return “MyNativeModule”;
}
//函数不能有返回值 因为被调用的 原生代码是异步的 原生代码执行结束后只能通过回调函数或发消息传给js文件
@ReactMethod
public void rnCallNative(String msg){
Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
//弹出吐司 打印msg
}
}

3.在Android/src/main/jaava/com/newtest01下创建MyReactPackage类实现接口ReactPackage包管理器，然后把2.中创建的类加到原生模块（NativeModule）列表中，代码如下：

package com.newtest01;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class MyReactPackage implements ReactPackage {
@Override
public List createNativeModules(ReactApplicationContext reactContext) {
//返回一个原生列表
List modules=new ArrayList<>();
//加了一个原生模块
modules.add(new MyNativeModule(reactContext));
return modules;
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

4.将3.中创建的包管理器添加到ReactPackage中的getpackages方法中，代码如下：

package com.newtest01;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new MyReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

5.在RN（也就是index.android.js文件）中调用原生模块添加NativeModule从react-native

添加点击事件onPress
在render方法下添加 call_button（）{
NativeModules.MyNativeModule.rnCallNative(‘调用原生方法’)；
}
如果报：
outDexFolder must be a folder
或
failed to create\newtest01\android\app\buildintermediates\debug\merging
解决方法：继续执行指令 react-native run-android