2.1 通过 url 地址加载网页

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 ( <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 ( <View style={styles.container}> <WebView bounces={false} scalesPageToFit={true} source={ {html:"<h1 style='color:#ff0000'>欢迎访问 https://shq5785.blog.csdn.net/</h1>"}} style={ {width:deviceWidth, height:deviceHeight}}> </WebView> </View> ); }} //样式定义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)}

React

介绍一下react

React单项数据流

react生命周期函数和react组件的生命周期

react和Vue的原理，区别，亮点，作用

reactJs的组件交流

有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

项目里用到了react，为什么要选择react，react有哪些好处

怎么获取真正的dom

选择react的原因

react的生命周期函数

setState之后的流程

react高阶组件知道吗？

React的jsx，函数式编程

react的组件是通过什么去判断是否刷新的

如何配置React-Router

路由的动态加载模块

Redux中间件是什么东西，接受几个参数

redux请求中间件如何处理并发

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