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>

    );

  },