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

小童不学前端2024-09-05 20:16

文章目录

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

前言

快速上手使用react-native-webview

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

react-native-webview介绍

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

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

在expo中使用

安装

javascript 复制代码

  // 官方推荐

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

使用

javascript 复制代码

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安装，可能报以下错误

报错

javascript 复制代码

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直接安装

javascript 复制代码

expo install react-native-webview