react-native-webview2Web 組件
本項目是WebView 或 Web 組件，支持Android、iOS, 支持auto height高度自適應及在html頁面和RN組件之間call js相互調用js方法，very useful & easily!
基于React-native原生的WebView組件純js實現(xiàn), 起名為react-native-webview2 或 WebView 或 Web.
-
react-native-webview2 當你設置了屬性 source={uri:xxx}時可以動態(tài)改變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 使用方法
-
執(zhí)行 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...")')