react-native-webview替代RN原生Core中Webview

4,505 阅读1分钟

Warning Please use the react-native-community/react-native-webview fork of this component instead. To reduce the surface area of React Native, <WebView/> is going to be removed from the React Native core. For more information, please read The Slimmening proposal.

一句话就是:使用 react-native-community/react-native-webview 替代。 要被从react-native core中删除了。

现在react-native-webview现在支持Android平台的onShouldStartLoadWithRequest方法了

##使用方式:

$ yarn add react-native-webview
$ react-native link react-native-webview

##使用案例:

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";

// ...
class MyWebComponent extends Component {
  render() {
    return (
      <WebView
        source={{ uri: "https://infinite.red/react-native" }}
        style={{ marginTop: 20 }}
        onLoadProgress={e => console.log(e.nativeEvent.progress)}
      />
    );
  }
}

如果出现如下报错:

Invariant Violation: requireNativeComponent: "RNCWKWebView" was not found in the UIManager

解决方案: ###1.将RNCWebView.xcodeproj添加到项目的Libraries中, 用Xcode打开项目,在librarie右键点击add Files to 项目中

image.png
###2.在Build Phases的Link Binary With Libraries中添加libRNCWebView.a文件
image.png