Fork me on GitHub

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

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方法了

##使用方式:

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

##使用案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!