2024年Web前端最全ReactNative进阶（十）：WebView 应用详解_react native webview，web前端页面性能优化

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

render() {
    return (
        <View style={styles.container}>
          <WebView bounces={false}
            scalesPageToFit={true}
            source={{uri:"https://shq5785.blog.csdn.net/",method: 'GET'}}
            style={{width:deviceWidth, height:deviceHeight}}>
          </WebView>
        </View>
    );
}

}

//样式定义
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop:20
}
});

AppRegistry.registerComponent(‘HelloWorld’, () => App);

#### 2.2 加载 html 代码

import React, {Component} from ‘react’;
import {
AppRegistry,
StyleSheet,
Dimensions,
Text,
View,
WebView
} from ‘react-native’;

//获取设备的宽度和高度
var {
height: deviceHeight,
width: deviceWidth
} = Dimensions.get(‘window’);

//默认应用的容器组件
class App extends Component {
//渲染
render() {
return (

<WebView bounces={false}
scalesPageToFit={true}
source={{html:“

欢迎访问 https://shq5785.blog.csdn.net/

”}}
style={{width:deviceWidth, height:deviceHeight}}>


);
}
}

//样式定义
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop:20
}
});

AppRegistry.registerComponent(‘HelloWorld’, () => App);

#### 2.3 RN -> HTML5 通信


当`WebView`加载`html`时，可实现`html`和`rn`之间的通信。`rn`向`html`发送数据可以通过`postMessage`函数实现。如下：


**RN**

<WebView
ref={(view) => (this.webView = view)}
useWebKit={false}
onLoad={() => {
let data = {
name: userInfo.usrName
};
this.webView.postMessage(JSON.stringify(data));
}}
onError={(event) => {
console.log(==webViewError:${JSON.stringify(event.nativeEvent)});
}}
onMessage={(event) => {
this._onH5Message(event);
}}
automaticallyAdjustContentInsets={false}
contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }}
onScroll={(event) => this._onScroll(event)}
style={styles.webview}
source={this.html ? { html: this.html } : { uri: this.url }}
bounces={false}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
/>

**html**

// 在html中注册事件接收rn发过来的数据并显示在html中
document.addEventListener(‘message’, function listener(RnData) {
messagesReceivedFromReactNative += 1;
document.getElementsByTagName(‘p’)[0].innerHTML =
'从React Native接收的消息: ’ + messagesReceivedFromReactNative;
document.getElementsByTagName(‘p’)[1].innerHTML = RnData.data;
// 获取接收后的数据后，及时清除监听器
document.removeEventListener(‘message’, listener)
});

在`html`中定义一个按钮，并添加事件向`rn`发送数据：

//window.postMessage向rn发送数据
document.getElementsByTagName(‘button’)[0].addEventListener(‘click’, function() {
window.postMessage(‘这是html发送到RN的消息’);
});

当`html`中调用了`window.postMessage`函数后，`WebView`的`onMessage`函数将会被回调，用来处理`html`向`rn`发送的数据,可以通过`e.nativeEvent.data`获取发送过来的数据。

// 接收HTML发出的数据
_onH5Message = (e) => {
this.setState({
messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
message: e.nativeEvent.data,
})
Alert.alert(e.nativeEvent.data)
}

#### 2.4 HTML5(Vue) -> RN 通信


**HTML5**

const message = {
flag: ‘previewIamge’
filePath: filePath
}
window.ReactNativeWebView.postMessage(Json.stringify(message))

**RN**  
 还是通过`WebView`提供的`onMessage` 属性完成回调。

<WebView
ref={(view) => (this.webView = view)}
useWebKit={false}
onLoad={() => {
let data = {
name: userInfo.usrName
};
this.webView.postMessage(JSON.stringify(data));
}}
onError={(event) => {
console.log(==webViewError:${JSON.stringify(event.nativeEvent)});
}}
onMessage={(event) => {
this._onH5Message(event);
}}
automaticallyAdjustContentInsets={false}
contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }}
onScroll={(event) => this._onScroll(event)}
style={styles.webview}
source={this.html ? { html: this.html } : { uri: this.url }}
bounces={false}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
/>

回调函数`_onH5Message()`实现逻辑如下：

// 接收HTML发出的数据
_onH5Message = (e) => {
this.setState({
messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
message: e.nativeEvent.data,
})
Alert.alert(e.nativeEvent.data)
}

#### 2.5 JavaScript 脚本注入



> 
> 注：这种方式适用于 `react-native-webview` （`RN`本身没有试过）。
> 
> 
> 


在`android`开发中，需要使用 `javaScriptEnabled`属性来支持`JavaScript`，`ios`默认是支持的，没有此属性。在`WebView`中提供了函数`injectJavaScript（String）`,它有一个字符串参数，可以向`webview`中注入脚本，如下：

//脚本注入
injectJS = () => {
const script = ‘document.write("Injected JS ")’; // eslint-disable-line quotes
if (this.webview) {
this.webview.injectJavaScript(script);
}
}

### 最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![大厂面试题](https://img-blog.csdnimg.cn/img_convert/a21cf9a2f35e280064e70434363c9813.webp?x-oss-process=image/format,png)

![面试题目录](https://img-blog.csdnimg.cn/img_convert/8546ab5a9f5784ad19356948378788ad.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/6ab349a89a1699ec5d95f61cc49457c1.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/64b5f0326e87be3fba5866b4a61d7c84.webp?x-oss-process=image/format,png)





析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-OO3xO283-1715374498502)]

[外链图片转存中...(img-YVsjir5Q-1715374498503)]

[外链图片转存中...(img-dDH8PJ16-1715374498504)]

[外链图片转存中...(img-agLszj6Y-1715374498504)]