React Native 调用原生Android组件

在现在的App中，已经有成千上万的原生UI部件了——其中的一些是平台的一部分，另外一些可能来自于一些第三方库，并且可能你本身还收藏了不少。React Native已经封装了大部分最多见的组件，譬如ScrollView和TextInput，但不可能封装所有组件。并且，说不定你曾经为本身之前的App还封装过一些组件，React Native确定无法包含它们。幸运的是，在React Naitve应用程序中封装和植入已有的组件很是简单。

好比WebView，官方并无提供Android端的实现，那么咱们如今就动手封装一下WebView。

 

首先，我须要继承SimpleViewManager这个泛型类，和原生模块相似，须要重写getName()方法，将UI组件名称暴露给javascript层，接着须要重写createViewInstance方法，在里面返回咱们须要使用的原生UI组件的实例，这里就是WebView。而后就是暴露一些必要属性给javascript层，为了简单起见，咱们这里只暴露两个属性，一个是url，一个是html，一旦javascript层设置了url，就会加载一个网页，而一旦设置了html，则会去加载这段html，而属性的暴露是使用注解，将注解设置在对应的set方法上，以后再set方法中处理UI的更新，好比一旦设置了url，在setUrl里面就要加载网页。

类ReactWebViewManager，首先注意导包

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.ViewProps;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.views.image.ReactImageView;
import com.facebook.react.views.image.ImageResizeMode;
import java.util.Arrays;
import java.util.List;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.support.annotation.Nullable;

有个地方要注意一下，这里导包ReactProp，如今最新的ReactProp包是

import com.facebook.react.uimanager.annotations.ReactProp;

之前是

import com.facebook.react.uimanager.ReactProp;

剩下的主要代码

public class ReactWebViewManager extends SimpleViewManager<WebView> {

  public static final String REACT_CLASS = "RCTWebView";

  @Override
  public String getName() {
    return REACT_CLASS;
  }
  @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) {
           Log.e("TAG", "setUrl");
           view.loadUrl(url);
       }
   @ReactProp(name = "html")
        public void setHtml(WebView view,@Nullable String html) {
           Log.e("TAG", "setHtml");
           view.loadData(html, "text/html; charset=utf-8", "UTF-8");
       }

 }

 

另外和原生模块同样，原生UI组件也须要进行注册，实现ReactPackage接口，进行WebView的注册。

类AnExampleReactPakge

将这个ReactPackage添加到ReactInstanceManager实例中去，在MainActivty中

 

而后在javascript层新建一个WebView.js文件。输入下面的内容

'use strict';
import React, {

  PropTypes
 } from 'react';
 import{
  requireNativeComponent,
 } from 'react-native';
// var { requireNativeComponent,PropTypes  } = require('react-native');


var iface = {
  name: 'WebView',
  propTypes: {
    url: PropTypes.string,
    html: PropTypes.string,
  },

};

module.exports = requireNativeComponent('RCTWebView', iface,{
  nativeOnly:{
    "testID": true,
    'renderToHardwareTextureAndroid': true,
    'accessibilityComponentType': true,
    'accessibilityLabel': true,
    'importantForAccessibility': true,
    'accessibilityLiveRegion': true,
    'onLayout':true,
}
});

 

到目前为止，你已经可使用这个WebView组件了。

 

var WebView=require('./WebView');

render: function() {

    return (

    <View style={styles.container}>

        <WebView  url="https://www.baidu.com" style={{width:200,height:400}}></WebView>

   </View>

    );

  },