React Native 调用原生Android组件 _Android组件

白日放歌须纵酒，青春作伴好还乡。这篇文章主要讲述React Native 调用原生Android组件相关的知识，希望能为你提供帮助。
在如今的App中，已经有成千上万的原生UI部件了——其中的一些是平台的一部分，另一些可能来自于一些第三方库，而且可能你自己还收藏了很多。React Native已经封装了大部分最常见的组件，譬如ScrollView和TextInput，但不可能封装全部组件。而且，说不定你曾经为自己以前的App还封装过一些组件，React Native肯定没法包含它们。幸运的是，在React Naitve应用程序中封装和植入已有的组件非常简单。
比如WebView，官方并没有提供android端的实现，那么我们现在就动手封装一下WebView。
【React Native 调用原生Android组件】
首先，我需要继承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}> < WebViewurl="https://www.baidu.com" style={{width:200,height:400}}> < /WebView> < /View> ); },