Rn原生模块

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<String, Object> getConstants() {
            final Map<String, Object> 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<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> list = new ArrayList<>();
            list.add(new ToastModule(reactContext));
            return list;
        }

        //创建原生视图
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            List<ViewManager> list = new ArrayList<>();
            return list;
        }
    }        


    3.MainApplication    关系原生模块注册类
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>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<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> list = new ArrayList<>();
        return list;
    }

    3.管理注册
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),new ToastPackage()
        );
    }
    应用
    JS
    import PropTypes from "prop-types";

import { requireNativeComponent, ViewPropTypes } from “react-native”;

var iface = {
name: “WebView”,
propTypes: {
url: PropTypes.string,
html: PropTypes.string,
…ViewPropTypes // include the default view properties
}
};
module.exports = requireNativeComponent(“RCTWebView”, iface, {
nativeOnly: {
testID: true,
renderToHardwareTextureAndroid: true,
accessibilityComponentType: true,
accessibilityLabel: true,
importantForAccessibility: true,
accessibilityLiveRegion: true,
onLayout: true
}
});

使用
import React, { Component } from “react”;
import { View, Text, StyleSheet } from “react-native”;
import WebViewDemo from “./WebViewDemo”;

export default class DemoWeb extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (

<WebViewDemo url={“https://www.baidu.com”} style={{ flex: 1 }} />

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#F5FCFF”
}
});