app内嵌h5界面用react开发

随着移动互联网的普及和应用场景的不断增加，web技术在移动端的应用也越来越广泛。跨平台的h5技术极大方便了开发者的开发和迭代速度，并且客户端集成Webview的功能也更加完善。而React技术在web开发中已经比较成熟，被很多大型公司（如Facebook、Instagram等）广泛应用。那么，如何将React应用于app内嵌h5界面的开发中呢？

React Native Webview

React Native的WebView组件允许在app内嵌入一个webview，它可以渲染在应用程序中运行的网页，就像在浏览器中一样。它允许开发人员利用web技术，包含HTML、CSS和JavaScript来构建原生的应用界面。

React Native Webview使用了消息通信机制（postMessage）来在WebView和原生代码之间传递消息。具体来说，当WebView加载一个url时，它会在当前的窗口前创建一个iframe，然后加载网页。当WebView加载完成后，React Native会向其中嵌入的iframe发送一个JavaScript的消息（“postMessage”），表示WebView已经加载完成了。

在React Native中，要使用WebView组件，需要先引入WebView和View组件：

```

import React, { Component } from 'react';

import { View, WebView } from 'react-native';

export default class WebViewExample extends Component {

render() {

return (

source={{ uri: 'https://github.com/facebook/react-native' }}

style={{ flex: 1 }}

/>

);

}

}

```

上面的代码中，uri属性指定了要加载的网页，这里以React Native官方GitHub页面为例。

与WebView相关的一些属性和方法：

- source：一个对象，指定WebView要加载的网页地址

- onMessage：WebView接受的消息

- injectedJavaScript：可以注入JavaScript代码来控制网页的行为

- onNavigationStateChange：在WebView中导航状态发生变化时被调用

- 发送消息：通过WebView组件的postMessage方法发送消息

React Native Communication

WebView作为Webview的容器，需要通过消息通信来实现WebView和RN的双向调用。使用React Native提供的WebView组件可以快速构建一个可用的WebView。前面的部分已经展示了一些基本的使用操作，这里主要介绍WebView和RN之间消息通信的机制。

在WebView组件中要用到postMessage方法。postMessage的用法如下：

```

window.parent.postMessage(data, origin)

```

其中，data是要发送的数据，origin是接受者的网址。例如，在WebView中发送消息：

```

window.postMessage(JSON.stringify({ data: 123 }))；

```

首先，将要发送的数据转换为字符串，然后通过window.postMessage将字符串消息发送到父窗口中。

在RN中，WebView调用postMessage方法需要通过injectedJavaScript属性指定要注入的JavaScript代码。如下所示，当RN需要向WebView发送消息时，就可以通过WebView组件的onMessage属性接收到消息，并且通过向WebView发送postMessage方法，向WebView发送消息。

```

import React, { Component } from 'react';

import { View, WebView } from 'react-native';

export default class WebViewExample extends Component {

onMessage = (event) => {

console.log(event.nativeEvent.data);

}

injectJavaScript = () => {

const script = `

document.getElementById('myBtn').addEventListener('click', () => {

window.postMessage('Button clicked', '*');

});

`;

this.webView.injectJavaScript(script);

}

render() {

return (

ref={(webView) => this.webView = webView}

source={{ uri: 'https://github.com/facebook/react-native' }}

onMessage={this.onMessage}

style={{ flex: 1 }}

/>

Click me

);

}

}

```

在上面的代码中，injectJavaScript方法被调用时，会在WebView中注入JavaScript代码。这里注入的JavaScript代码为监听按钮点击事件，并在点击时发送“Button clicked”消息到RN中。当WebView接收到来自RN的消息时，可以在onMessage中通过event.nativeEvent.data获取到消息的内容。

总结

以上就是使用React开发app内嵌H5界面的基本过程。虽然在React Native中WebView组件已经将消息通信机制实现得封装好了，但对于一些特定的场景可能需要手动实现。如果需要更复杂的交互，可以通过React Native提供的Bridge机制，实现RN和Webview之间的通信。

总体来说，使用React Native和WebView组件构建app内嵌H5界面的方式非常简单，代码量也比较少，开发速度和效率都非常高，是一个不错的选择。