React-Native 封装Android 原生控件，原生UI

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