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> 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

更多相关文章

1. Android Activity之间跳转出现短暂黑屏的处理方法
2. Android 图片对比（图片相似度）代码
3. android sdk 版本问题 R文件问题
4. android 代码优化：关闭输出日志
5. 使用Android内置的Pull解析器解析XML文件
6. android moudle 资源文件重命名
7. CrossWalk - android 动态加载so库文件实践

随机推荐

1. 程序员的快乐往往就是这么朴素无华且枯燥
2. 架构 | 到底该不该使用JavaScript框架
3. 2017年 Web 开发趋势
4. 超详细！详解一道高频算法题：数组中的第 K
5. 软件设计原则
6. 短小精悍，双指针对撞，求解「两数之和 II」
7. 从零到一学懂区块链（6）：哈希函数
8. （再进阶版）有了四步解题法模板，再也不害怕动
9. JavaScript 数据结构（2-2）：栈与队列-队列篇
10. 学了那么多公式，却依旧用不好Excel（实例讲