2024年ReactNative进阶（十）：WebView 应用详解_react native webview，CSS盒子模型居中方法

最新推荐文章于 2024-08-10 07:56:27 发布

2401_84437095

最新推荐文章于 2024-08-10 07:56:27 发布

阅读量1k

点赞数 18

分类专栏：程序员文章标签： react native css react.js

本文链接：https://blog.csdn.net/2401_84437095/article/details/138447352

版权

程序员专栏收录该内容

164 篇文章 1 订阅

订阅专栏

Vue

什么是MVVM？
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
组件之间的传值？
Vue 双向绑定原理
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
虚拟 DOM 实现原理
Vue 中 key 值的作用？
Vue 的生命周期
Vue 组件间通信有哪些方式?
vue 中怎么重置 data?
组件中写 name 选项有什么作用？
Vue 的 nextTick 的原理是什么？
Vuex 有哪几种属性?

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


#### 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` 属性完成回调。


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


#### 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);
}
}


实现思路：通过`injectJavaScript` 注入`JS` ，在`H5`页面加载之后立即执行。相当于`webview`端主动调用`H5`的方法。


注意事项：`injectJavaScript`注入的必须是`js`。注入内容可以是方法实现，也可以是方法名字。



> 
> 注意：
> 
> 
> * 注入函数名的时候，实际上注入的仍然是函数实现。
> * 当注入`js`方法名需要传递参数的时候，可提前将函数名作为字符串，函数参数作为变量，生成一个字符串，然后将此字符串注入。
> 
> 
> 


**RN端**


首先`Webview`绑定 `ref='webView'`


#### css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解


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

#### js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


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

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**



wait,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


[外链图片转存中...(img-wcGZoAoe-1714818440240)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

2401_84437095

关注

18
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
2024年ReactNative进阶（十）：WebView 应用详解_react native webview，CSS盒子模型居中方法

什么是MVVM？mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？组件之间的传值？Vue 双向绑定原理描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？虚拟 DOM 实现原理Vue 中 key 值的作用？Vue 的生命周期Vue 组件间通信有哪些方式?vue 中怎么重置 data?组件中写 name 选项有什么作用？Vue 的 nextTick 的原理是什么？Vuex 有哪几种属性?
复制链接

扫一扫