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

文章目录

• 前言
• react-native-webview介绍
• 在expo中使用
• • 安装
  • 使用
• 问题
• • 报错
  • 解决

---

前言

快速上手使用react-native-webview

---

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

react-native-webview介绍

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

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

在expo中使用

安装

  // 官方推荐

 npm install --save react-native-webview
 // 对于pnpm
 npm install --save react-native-webview

使用

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{ 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