如何在移动端app里嵌套web页面之react-native-webview

---

前言

快速上手使用react-native-webview

---

官方指南，可查看详细使用教程

react-native-webview介绍

React Native WebView是 React Native 的社区维护的 WebView 组件。它旨在替代内置的 WebView（已从核心中移除）。

简单来说，就是可以实现将web页面嵌套在app里面，实现混合开发。

在expo中使用

安装

  // 官方推荐npm install --save react-native-webview// 对于pnpmnpm install --save react-native-webview

使用

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';class MyWeb extends Component {render() {return (<WebViewsource={{ uri: 'https://infinite.red' }}style={{ marginTop: 20 }}/>);}
}

问题

如果使用npm或pnpm安装，可能报以下错误

报错

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

解决

版本不匹配问题，可以使用expo直接安装

expo install react-native-webview