本项目是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
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'}} ={[ 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('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 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
百度移动统计SDK支持使用react native框架的H5页面统计，封装好的插件已经在github上开源，相关用法具体请参考：https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。
-
The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t
-
React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Ima
-
我对React Native非常陌生，我想知道如何隐藏/显示组件 这是我的测试用例： 我有一个组件，我想要的是当输入获得焦点时显示，然后当用户按下取消按钮时隐藏。 我不知道如何“访问”TouchableHighlight组件，以便在我的函数中隐藏/显示它 另外，如何从一开始就隐藏按钮？
-
本文向大家介绍React Native之TextInput组件解析示例，包括了React Native之TextInput组件解析示例的使用技巧和注意事项，需要的朋友参考一下 1 概述 TextInput组件和Text组件类似，内部都没有使用FlexBox布局，不同的是TextInput组件支持文字的输入，因为支持文字输入， TextInput组件要比Text组件多了一些属性和方法。TextInp
-
我正在做一个React-Native项目，我意识到React-Native似乎打破了React-flow（父到子）道具更新。 基本上，我是从“应用程序”组件调用“菜单”组件，将一个道具传递给“菜单”。然而，当我更新“应用程序”状态时，“菜单”上的道具应该更新，但这不会发生。我做错什么了吗？ 这是我的密码： 一个pp.js 菜单js
-
本文向大家介绍react-native setState，包括了react-native setState的使用技巧和注意事项，需要的朋友参考一下 示例 要在应用程序中更改视图，可以使用setState-这将重新渲染您的组件及其任何子组件。setState在新状态和先前状态之间执行浅表合并，并触发组件的重新呈现。 setState 接受键值对象或返回键值对象的函数 键值对象 功能 使用函数对于基于