React?Native?加載H5頁(yè)面的實(shí)現(xiàn)方法
一、基本使用
作為目前流行的移動(dòng)跨平臺(tái)開發(fā)技術(shù)，React Native 提供了一個(gè)使用 JavaScript 構(gòu)建原生跨平臺(tái)移動(dòng)應(yīng)用的強(qiáng)大框架。使用React Native開發(fā)時(shí)，經(jīng)常會(huì)遇到加載H5網(wǎng)頁(yè)的需求，此時(shí)需要用到react-native-webview插件來(lái)執(zhí)行H5網(wǎng)頁(yè)的加載。
使用插件之前，需要先安裝npm i react-native-webview插件，命令如下：
npm i react-native-webview
然后，就可以在業(yè)務(wù)代碼中引入react-native-webview 插件的WebView組件，比如：
<WebView ref={ (webView) => this.webView = webView }
originWhitelist={ ['*'] }
// 布爾值,指定WebView中是否啟用JavaScript。只在Android上使用，因?yàn)樵趇OS上默認(rèn)啟用了JavaScript。
javaScriptEnabled={ true }
// 布爾值,指定是否開啟DOM本地存儲(chǔ)
domStorageEnabled={ true }
// 允許文件上傳
allowFileAccess={ true }
// 在webView內(nèi)部網(wǎng)頁(yè)中，調(diào)用window.postMessage可以觸發(fā)此屬性對(duì)應(yīng)的函數(shù)，通過event.nativeEvent.data獲取接收到的數(shù)據(jù)，實(shí)現(xiàn)網(wǎng)頁(yè)和RN之間的數(shù)據(jù)傳遞
onMessage={ this._onMessage }
//初始化調(diào)用方法
onLoad={() => { this.handleInjectJavascript();}}
// 加載時(shí)強(qiáng)制使用loading轉(zhuǎn)圈視圖，如果為true，webview可能會(huì)加載失敗，顯示為空白
startInLoadingState={false}
// webview加載錯(cuò)誤頁(yè)面
renderError={this.renderErrorView}
// 網(wǎng)絡(luò)路徑
// 也可以為本地路徑 source={ {uri: 'http://192.168.1.1111:8080/'} }
source={ {uri: 'http://www.baidu.com/'} } />使用WebView組件加載H5頁(yè)面時(shí)，必然會(huì)涉及到交互。
1.1 RN向H5發(fā)送數(shù)據(jù)
如果是RN向H5發(fā)送數(shù)據(jù)，那么可以調(diào)用onLoad函數(shù)的handleInjectJavascript() 方法。
//RN webview 向 vue發(fā)送數(shù)據(jù)
handleInjectJavascript = (data) => {
// 拼接數(shù)據(jù)為方法
const injectJavascriptStr = `(function() {
window.WebViewBridge.onMessage(${JSON.stringify(data)});
})()`;
// 通過 injectJavaScript 將數(shù)據(jù)傳遞給WebView頁(yè)面，并立即執(zhí)行為js
if(this.webView) {
this.webView.injectJavaScript(injectJavascriptStr)
}
}如果有回調(diào)的結(jié)果，需要在mounted生命周期函數(shù)中，
mounted() {
window.WebViewBridge = {
onMessage: this._onMessage //在window上掛載一個(gè)onMessage方法，RN會(huì)調(diào)用
}
// 自定義事件后直接觸發(fā)：
const event = new Event('WebViewBridge')
window.dispatchEvent(event);
},
methods: {
// 接收 RN 發(fā)送的消息
_onMessage(data) {
let that = this;
console.log('data ------- ',JSON.stringify(data)); // 'hello world'
}
}
以上就是RN向H5 傳值的過程，其具體過程：RN中給 window.WebViewBridge 增加一個(gè)名為 onMessage 的方法，H5初始化頁(yè)面會(huì)對(duì)應(yīng)給出onMessage 指向的方法，在此代碼塊 指向 _onMessage 方法并執(zhí)行。
1.2 H5向RN傳遞數(shù)據(jù)
如果是H5頁(yè)面主動(dòng)向RN發(fā)送數(shù)據(jù)，需要用到postMessage方法。
mounted() {
// 自定義事件后直接觸發(fā)：
const event = new Event('WebViewBridge');
window.dispatchEvent(event);
},
methods: {
// 向rn發(fā)送消息, 將值 'hello world' 掛載到 postMessage
_postMessage('hello world') {
window.ReactNativeWebView.postMessage(data);
}
}
RN 頁(yè)面在接收到 vue 傳輸?shù)臄?shù)據(jù)之后執(zhí)行 onMessage 函數(shù)方法。
onMessage={ this._onMessage }
_onMessage = (event) => {
console.log('接收vue發(fā)來(lái)的消息onMessage', event.nativeEvent.data);
}1.3 雙向傳值
當(dāng)然，有時(shí)候，也會(huì)涉及到多次雙向傳遞的情況。
mounted() {
window.WebViewBridge = {
onMessage: this._onMessage,
receiveMessage: this._receiveMessage //在window上掛載一個(gè)receiveMessage方法，RN自行調(diào)用
}
const event = new Event('WebViewBridge')
window.dispatchEvent(event);
},
methods: {
// 向rn發(fā)送消息
_postMessage('wow,RN!!') {
window.ReactNativeWebView.postMessage(data); // 將值 'wow,RN!!' 掛載到 postMessage
},
// 二次或多次接收RN發(fā)送消息
_receiveMessage(data){
let that = this;
console.log('data receiveMessage------- ',JSON.stringify(data));
}
}RN 頁(yè)面在接收到 H5 傳輸?shù)臄?shù)據(jù)之后執(zhí)行 onMessage 函數(shù)。
onMessage={ this._onMessage }
// 接受H5發(fā)送來(lái)的消息
_onMessage = (event) => {
console.log('接收H5發(fā)來(lái)的消息onMessage', event.nativeEvent.data);
const injectJavascriptStr = `(function() {
window.WebViewBridge.receiveMessage(${JSON.stringify('hello,vue2!!! ')});
})()`;
this.webView.injectJavaScript(injectJavascriptStr);
}二、屬性和方法
使用 WebView 組件我們可以通過 url 來(lái)加載顯示一個(gè)網(wǎng)頁(yè)，也可以傳入一段 html 代碼來(lái)顯示。該組件的引入是解決 React Native 內(nèi)嵌 H5 的比較好的解決方案，該組件自帶的常用屬性和方法我們可以歸納如下：
2.1 屬性
- source：在 WebView 中載入一段靜態(tài)的 html 代碼或是一個(gè) url（還可以附帶一些 header 選項(xiàng)）
- automaticallyAdjustContentInsets：設(shè)置是否自動(dòng)調(diào)整內(nèi)容。格式：boolean
- contentInset：設(shè)置內(nèi)容所占的尺寸大小。格式為{top:number,left:number,bottom:number,right:number}
- injectJavaScript：當(dāng)網(wǎng)頁(yè)加載之前注入一段 js 代碼。其值是字符串形式。
- startInLoadingState：是否開啟頁(yè)面加載的狀態(tài)，其值為 true 或者 false。
- bounces（僅iOS）：回彈特性。默認(rèn)為 true。如果設(shè)置為 false，則內(nèi)容拉到底部或者頭部都不回彈。
- scalesPageToFit（僅iOS）：用于設(shè)置網(wǎng)頁(yè)是否縮放自適應(yīng)到整個(gè)屏幕視圖，以及用戶是否可以改變縮放頁(yè)面。
- scrollEnabled（僅iOS）：用于設(shè)置是否開啟頁(yè)面滾動(dòng)。
- domStorageEnabled（僅Android）：用于控制是否開啟 DOM Storage（存儲(chǔ)）。
- javaScriptEnabled（僅Android）：是否開啟 JavaScript，在 iOS 中的 WebView 是默認(rèn)開啟的。
2.2 方法
- onNavigationStateChange：當(dāng)導(dǎo)航狀態(tài)發(fā)生變化的時(shí)候調(diào)用。
- onLoadStart：當(dāng)網(wǎng)頁(yè)開始加載的時(shí)候調(diào)用。
- onError：當(dāng)網(wǎng)頁(yè)加載失敗的時(shí)候調(diào)用。
- onLoad：當(dāng)網(wǎng)頁(yè)加載結(jié)束的時(shí)候調(diào)用。
- onLoadEnd：當(dāng)網(wǎng)頁(yè)加載結(jié)束調(diào)用，不管是成功還是失敗。
- renderLoading：WebView組件正在渲染頁(yè)面時(shí)觸發(fā)的函數(shù)，只有 startInLoadingState 為 true 時(shí)該函數(shù)才起作用。
- renderError：監(jiān)聽渲染頁(yè)面出錯(cuò)的函數(shù)。
- onShouldStartLoadWithRequest（僅iOS）：該方法允許攔截 WebView 加載的 URL 地址，進(jìn)行自定義處理。該方法通過返回 true 或者 false 來(lái)決定是否繼續(xù)加載該攔截到請(qǐng)求。
三、使用示例
3.1 加載外源網(wǎng)頁(yè)信息
import React,{Component} from 'react'
import {
StyleSheet,
View,
Text,
WebView,
} from 'react-native'
export default class Root extends Component{
constructor(props){
super(props)
}
render(){
return (
<View style={styles.container}>
<WebView
source={{uri: 'https://www.baidu.com'}}
domStorageEnabled={true}
javaScriptEnabled={true}
startInLoadingState={true}
automaticallyAdjustContentInsets={true}>
</WebView>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
},
})
上面是一個(gè)加載百度首頁(yè)的示例。
3.2 登陸場(chǎng)景
一款 toB 的 app，面對(duì)很多家客戶，每家客戶都有自己的登錄系統(tǒng)界面，并且客戶要求接入自己的登錄系統(tǒng)。這個(gè)時(shí)候就需要 webview 接入登錄界面之后，進(jìn)行一些 “值攔截”，進(jìn)行登錄狀態(tài)判斷。這里主要用到 webview 的 onNavigationStateChange 參數(shù)。此方法會(huì)在當(dāng)導(dǎo)航狀態(tài)發(fā)生變化的時(shí)候調(diào)用，例如取到下面的參數(shù)：
{
"canGoBack": false,
"canGoForward": false,
"loading": true,
"navigationType": "other",
"target": 229,
"title": "",
"url": "https://www.baidu.com/"
}這里主要注意 url 字段，網(wǎng)頁(yè)內(nèi)部登錄完成之后，可以發(fā)起一個(gè)重定向，前端關(guān)注 url 變化，進(jìn)行登錄狀態(tài)的判斷，同時(shí)重定向的 url 中可以拼接一些登錄信息字段，用于前端登錄狀態(tài)校驗(yàn)等。
{ "url": "https://www.baidu.com ? sessionId=xxx & username= xxx" }3.3 功能模塊嵌入到 RN 中
將 webview 作為功能模塊載體，這個(gè)時(shí)候就會(huì)涉及到用戶交互，需要 rn 與 h5 進(jìn)行值的互相傳遞。此時(shí)就要react native 向 web 中注入 js，web 也可以主動(dòng)回傳數(shù)據(jù)到 react native中。webview 組件提供了 injectedJavaScript 用于向 h5 注入js，在 h5 中使用 window.ReactNativeWebView.postMessage 進(jìn)行主動(dòng)的回調(diào)，并且在 webview 的 onMessage 中進(jìn)行字段的監(jiān)聽，以此就可以完成 react 和 h5 之間的數(shù)據(jù)交互。
const injectJSStr = `
window.injectStr='我是注入的字段';
var div = document.getElementById('testID');
div.style.color='red';
div.style.fontSize='100px';
`;
const html = `
<html>
<head></head>
<body>
<script>
setTimeout(function () {
window.ReactNativeWebView.postMessage(window.injectStr)
}, 2000)
</script>
<div id='testID'>Hello Word</div>
</body>
</html>
`;
......
<View style={{flex: 1}}>
<WebView
source={{html}}
injectedJavaScript={injectJSStr}
onMessage={event => {
alert(event.nativeEvent.data);
}}
/>
</View>
3.4 完整示例
例如，有下面一個(gè)需求：RN里面通過觸發(fā)刷新使H5界面的背景色可以隨機(jī)改變；H5 界面我們寫一個(gè)簡(jiǎn)單的 input 輸入使輸入的文字可以在RN 顯示出來(lái)。
import React, {Component} from 'react';
import {Text, StyleSheet, View, Button} from 'react-native';
import WebView from 'react-native-webview';
export default class App extends Component {
state = {colorIndex: 0, tip: '原生的Text組件，等webview中的發(fā)送。。'};
changeColor = () => {
this.webview.reload();
let colorIndex = this.state.colorIndex;
colorIndex = ++colorIndex % 5;
this.setState({colorIndex});
};
recieve = msg => {
let data = msg.nativeEvent.data;
let uname = JSON.parse(data).uname;
this.setState({tip: uname});
};
render() {
let colors = ['gray', 'yellow', 'red', 'antiquewhite', 'white'];
let scriptStr = `document.body.style.backgroundColor='${
colors[this.state.colorIndex]
}'`;
return (
<View style={{flex: 1}}>
<Button title="刷新WebView的背景色" onPress={this.changeColor} />
<Text style={{fontSize: 30}}>{this.state.tip}</Text>
<WebView
onMessage={this.recieve}
ref={ref => (this.webview = ref)}
injectedJavaScript={scriptStr}
source={{uri: 'http://192.168.180.241:8080/test.html'}}
/>
</View>
);
}
}
H5的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="info" name="uname" value="John" />
<br>
<button class="info">發(fā)送給原生組件</button>
<script>
document.querySelector('button').addEventListener('click', () => {
let uname = document.querySelector('input[name="uname"]').value
let msg = JSON.stringify({
uname
})
window.ReactNativeWebView.postMessage(msg)
})
</script>
</body>
</html>到此這篇關(guān)于React Native 加載H5頁(yè)面的文章就介紹到這了,更多相關(guān)React Native H5頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React八大常見錯(cuò)誤及其解決方案,并通過代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)react有一定的幫助,感興趣的朋友可以參考下2024-03-03
這篇文章主要為大家介紹了React前端DOM常見Hook封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
簡(jiǎn)易的redux?createStore手寫實(shí)現(xiàn)示例
這篇文章主要介紹了簡(jiǎn)易的redux?createStore手寫實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法
這篇文章主要為大家介紹了ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本)
散點(diǎn)圖(Scatter Chart),通常是一橫一豎兩個(gè)坐標(biāo)軸，數(shù)據(jù)是一組二維坐標(biāo)，分別對(duì)應(yīng)兩個(gè)坐標(biāo)軸，與坐標(biāo)軸對(duì)應(yīng)的地方打上點(diǎn)。由此可以猜到，需要的元素包括circle(圓)和axis(坐標(biāo)軸),接下來(lái)通過本文大家分享D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本) ，一起看看2019-05-05
react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解
這篇文章主要為大家介紹了react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了Javascript React基礎(chǔ)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的同學(xué)可以參考一下2019-06-06
本篇文章主要介紹了react-native-fs插件的使用以及遇到的坑，詳細(xì)的介紹了react-native-fs安裝使用，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
關(guān)于React動(dòng)態(tài)加載路由處理的相關(guān)問題
這篇文章主要介紹了關(guān)于React動(dòng)態(tài)加載路由處理的相關(guān)問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-01-01
react組件從搭建腳手架到在npm發(fā)布的步驟實(shí)現(xiàn)
這篇文章主要介紹了react組件從搭建腳手架到在npm發(fā)布的步驟實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-01-01