React-Native 封装Android 原生控件，原生UI，代码解析

原生UI的封装

import android.widget.Toast;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;import com.facebook.react.views.text.ReactBaseTextShadowNode;import java.util.HashMap;import java.util.Map;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);    }    @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();    }}

原生控件的封装

package com.demo2;import android.support.annotation.Nullable;import android.view.View;import android.webkit.WebView;import android.webkit.WebViewClient;import com.facebook.react.uimanager.SimpleViewManager;import com.facebook.react.uimanager.ThemedReactContext;import com.facebook.react.uimanager.annotations.ReactProp;public class WebViewModel extends SimpleViewManager<WebView> {    @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;    }    @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");    }}

封装好引用

package com.demo2;import com.facebook.react.ReactPackage;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.List;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<>();        list.add(new WebViewModel());        return list;    }}

Application声明

   @Override    protected List<ReactPackage> getPackages() {      return Arrays.<ReactPackage>asList(          new MainReactPackage(),            new VectorIconsPackage(),              new ToastPackage()      );    }

Js中声明Toast

import { NativeModules } from "react-native";export default NativeModules.ToastExample;

Js中引用Toast

import React, { Component } from "react";import {  Platform,  StyleSheet,  Text,  View,  NativeModules,  Button} from "react-native";import ToastExample from "./ToastExample";export default class Toast extends Component {  aaa = () => {    // NativeModules.ToastExample.show(    //   "32132131321",    //   NativeModules.ToastExample.LONG    ToastExample.show("12212121321", ToastExample.SHORT);  };  render() {    return (      <View style={styles.container}>        <Button title="吐司" onPress={this.aaa} />      </View>    );  }}

Android—>RN传递数据

 @ReactMethod  public void testAndroidCallbackMethod(String msg, Callback callback) {      Toast.makeText(getReactApplicationContext(), msg, Toast.LENGTH_LONG).show();      callback.invoke("Android--->RN传递数据");  }

Js中获取Android 传递的值

import React, { Component } from "react";import {  Platform,  StyleSheet,  Text,  View,  NativeModules,  Button} from "react-native";import Toast from "./ToastExample";export default class C extends Component {  constructor(prosp) {    super(prosp);    this.state = {      value: ""    };  }  Press2 = () => {    Toast.testAndroidCallbackMethod("哈哈哈哈", text => {      this.setState({        value: text      });    });  };  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>{this.state.value}</Text>        <Button onPress={this.Press2} title="吐司" />      </View>    );  }}

Js中声明WebVIew

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  }});

Js中引用WebVIew

import React, { Component } from "react";import { Platform, StyleSheet, Text, View } from "react-native";import WebView from "./WebDemo";export default class Web extends Component {  render() {    return (      <View style={styles.container}>        <WebView          style={{ flex: 1 }}          html={this.props.navigation.getParam("content", "请求错误
")}        />      </View>    );  }}

React-Native 封装Android(安卓)原生控件，原生UI

React-Native 封装Android 原生控件，原生UI，代码解析

请求错误

更多相关文章

随机推荐