Web 组件 react-native-webview2

MIT
JavaScript
跨平台
2016-08-25
GreatOS

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

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

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

  2. 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)}.

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

WebView示例项目: https://github.com/greatbsky/react-native-webview2-demo

WebView示例

WebView 使用方法

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

  2. 编写代码:

    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
      />
  3. 完整示例代码: 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...")')

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

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

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

2016/08/25 10:18
72
0
React Native系列——WebView组件使用介绍

用WebView组件实现了网址的切换,前进,后退,刷新功能。

2016/05/09 23:25
1K
3
react-native启动开发常见错误(持续更新)

1. debug error: make directory ... File exists error: make directory /Users/mobilewise/Library/Developer/Xcode/DerivedData/MCDM-epoyegaizqaljifbmfuxvovvwxqn/Build/Products/Debug...

2018/11/23 14:27
14
0
Hybrid App 和 React Native 开发那点事

Hybrid App(混合模式移动应用)开发是指介于Web-app、Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开发的优势」。很多人都知道,Rea...

2016/03/18 12:14
244
4
用react native 做的一个推酷客户端

用react native 做的一个推酷客户端 仅供大家参考,只为抛砖引玉,希望大家能以此来了解react,并编写出更多的优质的开源库,为程序员做出贡献。 用的的组件: NavigatorIOS react-native-sw...

2016/12/09 01:07
22
0
从react来理解learn once write anywhere

开发思维的转变

2015/11/01 14:53
206
0
初识flutter

关注flutter已经好久,因为没有发正式版,所以一直也不想过早的躺浑水,但是最近无意中看到几篇文章,再加上美团和咸鱼等app也一直在做灰度测试,所以上周开始看了一下官方文档,地址:https...

2018/11/28 17:41
1K
0
React-Native入门指导之iOS篇

写在前面 1. 什么是React-Native?      React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App...

2016/06/13 14:52
62
0
Facebook 再次重磅投下几个开源库

1. Android 图片缓存 - Fresco GitHub:https://github.com/facebook/fresco 特点: 两个内存缓存加上磁盘缓存构成了三级缓存 支持流式,可以类似网页上模糊渐进式显示图片 对多帧动画图片支...

2016/03/28 17:29
8
1
React-Native 开发 android & ios App,共享一份代码

React-Native 开发 android & ios App,共享一份代码

2016/12/09 00:52
70
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部