Web 组件 react-native-webview2

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/phj_88/article/details/82177309

本项目是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...")')

博主花大量时间和精力整理了大前端最新前端视频教程，省去大家找资源的时间

有兴趣的可以点击下方文字访问博主淘宝网（感谢支持）或直接联系博主QQ：184009766

点击我，支持博主，前端视频教程