Android原生组件集成RN

原生模块：

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

            );

        }