React Native WebView详解

发布时间：2023-05-21

一、WebView介绍

React Native WebView是一个React组件，它用于嵌入第三方web应用程序（如h5游戏），同时仍然可以完全访问所有native功能，包括可调用本机功能的自定义JavaScript代码。 WebView基于WebKit浏览器引擎，这也是现代Chrome、Safari和其它浏览器所使用的引擎。所以可以支持大多数的Web API 和特性。 WebView可以通过设置内联样式和props来进行自定义，可以使用CSS样式文件，也支持引用复杂的HTML代码。

二、WebView 基本使用

  1. 引入WebView组件：
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
  1. 使用WebView：
export default class MyApp extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://www.example.com'}}
        style={{ marginTop: 20 }}
      />
    );
  }
}

在上面的代码示例中，source是用于指定WebView要加载的web页面或网址，style用于设置WebView的样式。 3. 可以在WebView内部定义一个HTML文件：

export default class MyApp extends Component {
  render() {
    return (
      <WebView
        source={{html: '<h1>Hello world </h1>'}}
        style={{ marginTop: 20 }}
      />
    );
  }
}

以上代码相当于渲染一个WebView，HTML头部是一个包含“Hello world”标题的h1标签。渲染的页面将显示在WebView内部的屏幕上。

三、WebView高级用法

1. 调用Web中的JavaScript函数

为了从WebView中调用JavaScript函数，我们可以使用WebView的注入JavaScript功能和onMessage属性 以下是示例代码:

import React, { Component } from 'react';
import { WebView, Alert } from 'react-native-webview';
import { Button } from 'react-native';
export default class MyApp extends Component {
  webview = null;
  constructor(props) {
    super(props);
    this.state = {};
  }
  injectJS = () => {
    const script = "alert('调用Web中的JavaScript函数')";
    this.webview.injectJavaScript(script);
  };
  onMessage(event) {
    Alert.alert(event.nativeEvent.data);
  }
  render() {
    return (
      <>
        <Button title="调用Web中的JavaScript函数" onPress={this.injectJS}/>
        <WebView
          ref={(ref) => { this.webview = ref; }}
          source={{uri: 'https://www.example.com'}}
          onMessage={this.onMessage}
          style={{ marginTop: 20 }}
        />
      </>
    );
  }
}

2. 实现WebView与React Native的相互通信

WebView通过onMessage属性和postMessage方法来实现与React Native的通信。 以下是示例代码：

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import { Button } from 'react-native';
export default class MyApp extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  onMessage(event) {
    const { type, data } = JSON.parse(event.nativeEvent.data);
    if (type === 'INCREMENT') {
      this.setState({ count: this.state.count + 1 });
    }
  }
  onButtonPress() {
    this.refs.webview.postMessage(JSON.stringify({
      type: 'INCREMENT'
    }));
  }
  render() {
    const html = `
      <script>
        function onPress() {
          window.ReactNativeWebView.postMessage(JSON.stringify({
            type: 'INCREMENT'
          }));
        }
      </script>
      <button onclick="onPress()">Increment</button>
      <p>Count: ${this.state.count}</p>
    `;
    return (
      <>
        <Button title="增加" onPress={() => this.onButtonPress()} />
        <WebView
          ref="webview"
          source={{ html: html }}
          onMessage={(event) => this.onMessage(event)}
        />
      </>
    );
  }
}

以上代码中，WebView通过postMessage方法向React Native发送一个json格式的数据，React Native 通过onMessage属性来接收数据，同时WebView在相应的成功后展示具体数据。

总结

通过该文，我们了解了React Native WebView组件的基本使用和高级用法。在实际开发中，我们可以根据具体的业务需求来选择使用WebView的相应功能，以达到更好的用户体验。

推荐文章