本项目是WebView 或 Web 组件，支持Android、iOS,支持autoheight高度自适应及在html页面和RN组件之间calljs相互调用js方法，veryuseful&easily!
基于React-native原生的WebView组件纯js实现,起名为react-native-webview2 或 WebView 或 Web.
react-native-webview2 当你设置了属性 source={uri:xxx}时可以动态改变WebView 的高度(目前还不支持source={html})，但若你设置了属性={height:xxx}设置了高度就不能自适应了,设置了高度后高度是固定的.
react-native-webview2 也可以让你在html页面和reactnative之间相互调用js代码。要从rn组件调用html页面的js，你只需要在rn组件中调用this.web.evalJs("jscode...here") ，若要调用react-native代码，你只需要在html页面中调用 returnEval("rncode...here")，同时你需要设置这个组件的属性evalReturn={(r)=>{eval(r)}.
react-native-webview2支持所有其他原生ReactNative WebView的属性.
WebView示例项目: https://github.com/greatbsky/react-native-webview2-demo
WebView示例WebView 使用方法执行 npminstallreact-native-webview2--save
编写代码:
import Web from 'react-native-webview2';<Web ref={(c) => {this.web = c}} evalReturn={(r) => {eval(r)} source={{uri: 'xxx'}} ={[ s.web, {minHeight: 300}]} ...other props />完整示例代码: https://github.com/greatbsky/react-native-webview2-demo/blob/master/WebView2App/app.js
WebView 配置新增的属性
evalJs:从react-native调用html页面里的js的方法.例如: this.web.evalJs('vart=document.title;alert(t)');
evalReturn:若你需要从html页面调用react-native的方法，这个属性是需要的.固定写法：evalReturn={(r)=>{eval(r)}.
go:打开一个新的url.例如: this.web.go('https://xxxxxx');
其他
returnEval:在html页面的一个function，从html页面调用react-native的方法时调用的js方法,例如：returnEval('this.setText("fromhtmlpage...")')
评论