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。
据这篇文档所说，React Native内置的WebView马上就要废弃了。因此，这个插件就用来取代内置的WebView。这个插件是一个由react native社区维护的第三方插件。
要求：
运行我们的例子需要先满足以下要求：
- Nodejs >= 8.x.x， 可以用npm或者yarn进行安装。
- watchman：一个文件观看服务
- 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的内容被显示在模拟器的屏幕上。
加载远端的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
Recent Comments