支持android&ios高度自适应及JS相互调用的组件react-native-webview2
2016-08-25 00:00
986 查看
摘要: 本项目是WebView 或 Web 组件,支持Android、iOS, 支持auto height高度自适应及在html页面和RN组件之间call js相互调用js方法,very useful & easily!
本项目是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示例项目: https://github.com/greatbsky/react-native-webview2-demo
编写代码:
完整示例代码: https://github.com/greatbsky/react-native-webview2-demo/blob/master/WebView2App/app.js
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...")')
本项目是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示例项目: https://github.com/greatbsky/react-native-webview2-demo
WebView示例
WebView 使用方法
执行 npm install react-native-webview2 --save编写代码:
import Web from 'react-native-webview2'; <Web ref={(c) => {this.web = c}} evalReturn={(r) => {eval(r)} source={{uri: 'xxx'}} style={[styles.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('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
相关文章推荐
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- 解决 react native 的 webview 组件不支持android客户端上传图片文件问题
- android2.3上用WebView组件js和java相互调用报错
- [Android]WebView使用详解(一)——Native与JS相互调用(附JadX反编译)20160522
- Android webview 与 JS相互调用
- IOS 与 Android WebView 中 JS 调用原生代码
- Android webview开发中 js与android相互调用
- IOS WebView中JS和OC相互调用
- JS 调用IOS Android webview方法
- iOS webView的高级用法之JS交互,js与oc的相互调用(JavaScriptCore)
- Android WebView 实现JS相互调用 JsBridge
- Android WebView与网页JS相互调用
- Android WebView与网页JS相互调用
- 在webView 中使用JS 调用 Android / IOS的函数 Function
- Android之WebView与原生js之间的相互调用
- android之通过webview实现与js方法相互调用,数据交互
- Android基于WebView的Java和JS相互调用实现步骤,附带精简可行的DEMO
- iOS--常用控件--WebView与js相互调用
- android WebView java与js相互调用
- androidwebview与js相互调用