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}),但若你设置了属性 ={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示例项目: https://github.com/greatbsky/react-native-webview2-demo
[](https://github.com/greatbsky/react-native-
webview2/wiki#webview%E7%A4%BA%E4%BE%8B)WebView示例
[](https://github.com/greatbsky/react-native-
webview2/wiki#webview-%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)WebView 使用方法
执行 npm install react-native-webview2 –save
编写代码:
import Web from 'react-native-webview2';
{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
[](https://github.com/greatbsky/react-native-
webview2/wiki#webview-%E9%85%8D%E7%BD%AE)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…”)’)
react-native-webview2 官网
https://github.com/greatbsky/react-native-webview2
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。