react 拖拽连接插件_React Native WebView 插件介绍

点上面“东哥IT笔记”，关注并星标

每天一篇业界最新技术分享

---

在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社区维护的第三方插件。

要求：

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

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=trueandroid.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 '#009b88' size=  }export default function App() {  return (           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进行讨论。