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

最新推荐文章于 2025-12-03 02:22:49 发布

原创最新推荐文章于 2025-12-03 02:22:49 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native-webview #react-native #webview

ReactNative 同时被 2 个专栏收录

70 篇文章

订阅专栏

ReactNative

60 篇文章

订阅专栏

为应对React Native核心移除<WebView/>组件，本文推荐使用react-native-community/react-native-webview作为替代。此组件已支持Android平台的onShouldStartLoadWithRequest方法，并提供安装及使用案例。

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 项目中

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