如何创建一个依赖Android AAR文件的React Native组件

Android React Native 已经将几个常用的原生组件进行了封装，比如 ScrollView 和 TextInput，但是并不是所有系统的原始组件都被封装了，因此有的时候不得不自己动手封装一下，从而能够使用那些React Native没有为自己封装的原生组件，比如WebView，官方并没有提供Android端的实现，那么现在就动手封装一下WebView。

之前一篇文章Android React Native使用原生模块，而使用原生UI组件的方法和使用原生模块的方法十分类似。

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

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/htmlcharset=utf-8", "UTF-8")

}

}

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

public class AppReactPackage implements ReactPackage {

@Override

public List<NativeModule>createNativeModules(ReactApplicationContext reactContext) {

return Collections.emptyList()

}

@Override

public List<Class<? extends JavaScriptModule>>createJSModules() {

return Collections.emptyList()

}

@Override

public List<ViewManager>createViewManagers(ReactApplicationContext reactContext) {

return Arrays.<ViewManager>asList(

new ReactWebViewManager())

}

}

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

.addPackage(new AppReactPackage())

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

'use strict'

var { requireNativeComponent,PropTypes } = require('react-native')

var iface = {

name: 'WebView',

propTypes: {

url: PropTypes.string,

html: PropTypes.string,

},

}

module.exports = requireNativeComponent('RCTWebView', iface)

可以看到，只是在里面指定了属性的类型。

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

var WebView=require('./WebView')

react-native ios 打包安装到手机中的方法：

1、安装nactiv-cli来完成react-native所运行的环境，安装命令如下：

npm install -g react-native-cli

2、运行源码抓取命令手机React Native的源码和依赖，提供在xcode中创建的项目之用。

react-native init AwesomeProject

在xcode中的目录包括：

/iOS/AwesomeProject.xcodeproj

3、运行电影程序：

render() {

var movie = MOCKED_MOVIES_DATA[0]

return (

<View style={styles.container}>

<Text>{movie.title}</Text>

<Text>{movie.year}</Text>

<Image source={{uri: movie.posters.thumbnail}} />

</View>

)

}

reactnative依赖一直安装不了是安装包的问题。

根据reactnative参数资料，安装reactnative依赖要使用yarn安装包文件，因为在windows环境下搭建reactnative开发环境时，需要通过npm安装yarnReactNative的命令行工具，所以没有yarn安装包存在的话reactnative依赖就无法安装。

ReactNative是一个使用JavaScript和React来编写跨终端移动应用。

---