原生模块：

java：

1.ToastModule  实现原生封装核心操作

public class ToastModule extends ReactContextBaseJavaModule {

//自定义常量

private static final String DURATION_SHORT_KEY = "SHORT";

private static final String DURATION_LONG_KEY = "LONG";

//构造方法

public ToastModule(ReactApplicationContext reactContext) {

super(reactContext);

}

//设置Js端调用原生模块的名称

@Override

public String getName() {

return "ToastExample";

}

//预定义常量的使用场景

@Override

public Map getConstants() {

final Map constants = new HashMap<>();

constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);

constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);

return constants;

}

/**

* 给出js调用java的方法

* Java方法需要使用注解@ReactMethod。方法的返回类型必须为void

*/

@ReactMethod

public void show(String msg,int time){

Toast.makeText(getReactApplicationContext(),msg,time).show();

}

}

2.ToastPackage  注册模块

public class ToastPackage implements ReactPackage {

//创建原生模块

@Override

public List createNativeModules(ReactApplicationContext reactContext) {

List list = new ArrayList<>();

list.add(new ToastModule(reactContext));

return list;

}

//创建原生视图

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

List list = new ArrayList<>();

return list;

}

}

3.MainApplication    关系原生模块注册类

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),new ToastPackage()

);

}

js:

方式一：

NativeModules.ToastExample.show("dadasdasdas",NativeModules.ToastExample.SHORT)

方式二

ToastExample.js:

//导入RN中原生模块的类

import { NativeModules } from "react-native";

//导出自定义的原生模块

export default NativeModules.ToastExample;

ToastExampleDemo.js

//导入直接使用原生模块

import Toast from "./ToastExample";

Press = () => {

Toast.show("弹出Toast", Toast.SHORT);

};

原生UI组件：

java:

1.WebViewManager.js  原生UI组件类

public class WebViewManager extends SimpleViewManager {

//返回JS调用时候使用的名称

@Override

public String getName() {

return "RCTWebView";

}

//用于创建初始化的实例控件对象

@Override

protected WebView createViewInstance(ThemedReactContext reactContext) {

WebView webView = new WebView(reactContext);

webView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

});

return webView;

}

//设置RN中方法属性

@ReactProp(name = "url")

public void setUrl(WebView view, @Nullable String url) {

view.loadUrl(url);

}

@ReactProp(name = "html")

public void setHtml(WebView view, @Nullable String html) {

view.loadData(html, "text/html; charset=utf-8", "UTF-8");

}

}

2.注册原生组件

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

List list = new ArrayList<>();

return list;

}

3.管理注册

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),new ToastPackage()

);

}