android js高度,支持android&ios高度自适应及JS相互调用的组件react-native-webview2

本项目是WebView 或 Web 组件,支持Android、iOS, 支持auto height高度自适应及在html页面和RN组件之间call js相互调用js方法,very useful & easily!

基于React-native原生的WebView组件纯js实现, 起名为react-native-webview2 或 WebView 或 Web.

react-native-webview2 当你设置了属性 source={uri:xxx}时可以动态改变WebView 的高度(目前还不支持source={html}),但若你设置了属性style={height:xxx}设置了高度就不能自适应了, 设置了高度后高度是固定的.

react-native-webview2 也可以让你在html页面和reactnative之间相互调用js代码。要从rn组件调用html页面的js,你只需要在rn组件中调用this.web.evalJs("js code...here") ,若要调用react-native代码,你只需要在html页面中调用 returnEval("rn code...here"),同时你需要设置这个组件的属性evalReturn={(r) => {eval(r)}.

react-native-webview2支持所有其他原生React Native WebView的属性.

WebView示例

demo.gif

WebView 使用方法

执行 npm install react-native-webview2 --save

编写代码: import Web from 'react-native-webview2';

ref={(c) => {this.web = c}}

evalReturn={(r) => {eval(r)}

source={{uri: 'xxx'}}

style={[styles.web, {minHeight: 300}]}

...other props

/>

WebView 配置

新增的属性

evalJs: 从react-native调用html页面里的js的方法. 例如: this.web.evalJs('var t = document.title; alert(t)');

evalReturn: 若你需要从html页面调用react-native的方法,这个属性是需要的. 固定写法:evalReturn={(r) => {eval(r)}.

go: 打开一个新的url. 例如: this.web.go('http://xxxxxx');

其他

returnEval: 在html页面的一个function,从html页面调用react-native的方法时调用的js方法, 例如:returnEval('this.setText("from html page...")')

Licensed

MIT License

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值