React Native WebView 插件介绍

在React Native中,WebViews可以让移动APP访问任何web的门户。换句话说,web view使我们可以在app接口打开一个web的URLs。虽然React Native有提供一个内置的web view组件,我们这里的例子会使用react-natvie-webview这个插件,因为他功能更加强大。React Native WebView是React Native中一个更加现代化,支持更好的跨平台的WebView。

Machine generated alternative text:
HOW TO 
CREATE A WEBVIEW 
IN REACT NATIVE 
instamobile.io

据这篇文档所说,React Native内置的WebView马上就要废弃了。因此,这个插件就用来取代内置的WebView。这个插件是一个由react native社区维护的第三方插件。

要求:

运行我们的例子需要先满足以下要求:

  1. Nodejs >= 8.x.x, 可以用npm或者yarn进行安装。
  2. watchman:一个文件观看服务
  3. react-natvie-cli

从React Native WebView开始

在设置web view之前,我们需要先安装这个插件。我们这里使用yarn来安装,当然我们也可以使用npm来安装。可以运行下面的命令来进行安装:

yarn add react-native-webview

假如react-native的版本是大于0.60的,那么安装的时候就会把插件和native的配置自动连接起来。不过,对于早期的版本,我们需要运行下面的命令:

react-native link react-native-webview

IOS

对于IOS的情况,我们需要运行下面的命令:

pod instal

Android

对于Android,这个模块并不需要再运行别的命令了。不过对于react-native-webview >= 6.x.x的版本,我们需要确保AndroidX是在我们的项目中打开的。这个可以通过修改android/gradle.properties文件,加入下面的内容:

android.useAndroidX=true
android.enableJetifier=true

上面就完成我们的安装,下面我们开始在我们的项目中使用这个插件。

使用React Natvie WebView来加载内联的HTML

首先,我们来加载一个简单的HTML内容到我们的APP接口中。我们需要加入下面的import到我们的 _App.js_ 文件中:

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

这样,我们就把 _react-native-webview_ 插件的WebView import到我们的组件中了。现在,我们可以使用这个插件来加载HTM的内容了:

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>This is a static HTML source!</h1>' }}
      />
    );
  }
}

这里,我们定义了一个MyInlinWeb的类组件。这个组件的render函数会render WebView组件。这个WebView组件有一个HTML内容被设置在source 属性上。这样,我们可以看到有一个HTML的内容被显示在模拟器的屏幕上。

Machine generated alternative text:
instamobile.io

加载远端的URL

现在,不再是简单的HTML内容了,我们来通过remote的URL加载整个网页。我们需要在source属性中设置uri选项,如下代码所示:

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
  render() {
    return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
  }
}

这样,我们就会在app的屏幕上显示这个网页了:

在React Native Webveiw中显示加载转动

在WebView中加载URL的时候,他可能需要一定的时间来加载完成这个网页。所以,为了表示这个等待,我们可以显示一个加载标志来表明他网页正在加载。为了做这个,我们需要从react-native包中import ActivityIndicator组件,代码如下:

import { Text, View, StyleSheet, ActivityIndicator } from 'react-native';

现在,我们需要在我们的代码中使用这个组件了。我们需要创建一个函数,称之为LoadingIndicatorView来返回ActivityIndicator,代码如下:

import * as React from 'react';
import { Text, View, StyleSheet,ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import { Card } from 'react-native-paper';
 function LoadingIndicatorView() {
    return <ActivityIndicator color='#009b88' size='large' />
  }
export default function App() {
  return (
   <WebView
        originWhitelist={['*']}
        source={{ uri: 'https://instamobile.io/blog' }}  
        renderLoading={this.LoadingIndicatorView}
        startInLoadingState={true}
      />
  );
}

这里,我们使用了ActivitIndicator的color和size的属性。然后我们在WebView组件的RenderLoading属性中调用了这个LoadingIndicatorView。这个可以在我们完成网页加载之前都显示loading的标志。

我们开始看到,还设置了一个startInLoadingState属性,这个值强制WebView在第一次加载的时候显示加载的标志。要想renderLoading工作,这个值必须设为true。

我们可以在模拟器上得到下面的图:

总结

这个例子中,我们学习了React Native的web view属性。因为React Native内置的web view要废弃了,我们学习了如何使用第三方的插件: react-native-webview。首先,我们尝试了如何render简单的HTML内容,然后,我们详细介绍了如何使用WebView组件和它的属性来render一个URL的整个HTML内容。假如你想了解更多的内容,你可以去这个web view的repo进行讨论。

原文地址:

https://hackernoon.com/react-native-webview-plugin-introduction-ps1u3urr

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *