收到此错误：错误：捆绑失败：错误：无法解析模块`react-native-safe-area-context`

Posted 2023-02-16

【中文标题】收到此错误：错误：捆绑失败：错误：无法解析模块`react-native-safe-area-context`

【英文标题】：Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`

【发布时间】：2020-04-20 22:33:19

【问题描述】：

运行我的应用程序后出现此错误：

错误：捆绑失败：错误：无法从 node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js 解析模块 react-native-safe-area-context：在项目中找不到 react-native-safe-area-context。

但我为旧演示所做的相同。效果很好。

我不知道我在这里做错了什么。请检查我的代码：

安装：

React 原生导航和手势处理程序：

npm install --save react-navigation

npm install --save react-native-gesture-handler

React Native 堆栈：

npm install --save react-navigation-stack

App.js

import  createAppContainer  from "react-navigation";
import  createStackNavigator  from "react-navigation-stack";
import FirstOptionsPage from "./FirstOptionsPage";

const MainNavigator = createStackNavigator(
  
    FirstOptions: FirstOptionsPage
  ,
  
    defaultNavigationOptions: 
      headerStyle: 
        // backgroundColor: '#28F1A6',
        elevation: 0,
        shadowOpacity: 0
      ,
      headerTintColor: "#ca375e",
      headerTitleStyle: 
        fontWeight: "bold",
        color: "#161616"
      
    
  
);

const App = createAppContainer(MainNavigator); // For setting Navigation Stack
export default App;

和FirstOptionsPage.js：

import React from "react";
import 
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  ScrollView,
  Switch
 from "react-native";

export default class FirstOptionsPage extends React.Component 
  static navigationOptions = 
    title: "Preferences"
  ;

  constructor(props) 
    super(props);
    this.state = 
      switch1Value: false
    ;
  

  toggleSwitch1 = value => 
    this.setState( switch1Value: value );
    console.log("Switch 1 is: " + value);
  ;

  render() 
    const  navigate  = this.props.navigation;
    return (
      <SafeAreaView style=styles.mainContainerStyle>
        <View style=styles.subContainerStyle>
          <Text style=styles.subtitleTextStyle>Someone likes my post</Text>
          <View style=styles.switchStyle>
            <Switch
              onValueChange=this.toggleSwitch1
              value=this.state.switch1Value
              thumbColor=MAGENTA_COLOR_CODE
              trackColor=
                false: GREY_COLOR_CODE,
                true: DARK_GREY_COLOR_CODE
              
            />
          </View>
        </View>
      </SafeAreaView>
    );
  

我是 React-Native 的新手。我该如何解决这个问题？

【问题讨论】：

检查你的节点模块中的react-native-safe-area-context，react-navigation-stack 需要，但你的节点模块没有

我必须将react-native-safe-area-context 添加到我的package.json 文件中。我不明白为什么这不是 React Navigation 的对等依赖项。但是，可能是由于版本冲突或其他原因。如果它需要它，它应该是一个对等依赖。

【参考方案1】：

我认为问题出在SafeAreaView，对于新的 react-native 版本，它已迁移到react-native-community/react-native-safe-area-view。如果你想使用SafeAreaView，你应该先安装它。

新的用法是这样的：

import SafeAreaView from 'react-native-safe-area-view';

export default function MyAwesomeApp() 
  return (
    <SafeAreaView style= flex: 1 >
      <View style= flex: 1 >
        <Text>
          Look, I'm safe! Not under a status bar or notch or home indicator or
          anything! Very cool
        </Text>
      </View>
    </SafeAreaView>
  );

要安装它，您可以使用以下命令：yarn add react-native-safe-area-view react-native-safe-area-context。

如果你不使用自动链接，你也必须链接它。有关它的详细信息，请参阅link

【讨论】：

现在我收到此错误error: bundling failed: Error: Unable to resolve module `@react-native-community/masked-view` from `node_modules/react-navigation-stack/lib/module/vendor/views/MaskedView.js`: @react-native-community/masked-view could not be found within the project.

实际上在我之前的项目中一切正常。现在它正在显示这个问题。

你应该知道，从 react-native 0.6 开始，许多库已经从 react-native 核心中移除了。这个问题像预问题，阅读这个链接[github.com/react-native-community/react-native-masked-view]

按照您在回答中所说的操作后，我还必须安装@react-native-community/masked-view 来修复它。然后我的代码成功运行。感谢您的帮助。

是的，这是写在发行说明github.com/react-navigation/stack/releases/tag/v2.0.1

【参考方案2】：

有点搞笑，我想加导航所以加了

npm install --save react-navigation

为了让它正常工作，我必须添加：

expo install react-native-gesture-handler react-native-reanimated

然后我得到了

无法解析“react-native-safe-area-context” 所以我补充说：

expo 安装 react-navigation-stack

expo install react-native-safe-area-view react-native-safe-area-context

然后我得到了

捆绑失败：错误：无法解析模块@react-native-community/masked-view

所以我搜索了蒙面视图（根据其 git 文档，目前世博会不支持该视图）。然后我发现我可以使用：

expo install @react-native-community/masked-view 哪个可行或不可行:)

因此，从现在开始，我在所有 react-native 项目开始时使用以下命令，以便能够正确使用导航：

npm install --save react-navigation

expo install react-native-gesture-handler react-native-reanimated react-navigation-stack

expo install react-native-safe-area-view react-native-safe-area-context

expo install @react-native-community/masked-view

【讨论】：

找不到模块：无法解析 'react-native-screens' LOL

该死，是真的哈哈哈

【参考方案3】：

运行这些命令后：

npm i react-native-safe-area-view react-native-safe-area-context &&
react-native link react-native-safe-area-context

它提示我一个关于屏蔽视图的错误，所以我还必须运行npm i @react-native-community/masked-view，然后我的代码现在可以在 android 物理设备上成功运行。

感谢Lenoarod 和Gautam Shrivastav 指出正确的方向。

【讨论】：

对于 react native 版本 0.60 及以上版本，使用 yarn 代替 npm 并且不要链接。

【参考方案4】：

安装以下两个，

npm install --save @react-native-community/masked-view
npm install react-native-safe-area-context

这对我有用

【讨论】：

我不明白为什么这不在 react-navigation 的依赖项列表中。无论如何安装这两个对我有用。

【参考方案5】：

我认为您错过了项目的链接依赖性，因此您可以尝试如下：

使用 React Native 0.6 或更高版本：

在 ios 上，确保您已安装并运行 Cocoapods：

cd ios
pod install
cd ..

使用 React native 0.59 及更低版本试试：

react-native link react-native-safe-area-context

【参考方案6】：

全部复制粘贴到终端

expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

为我工作

【参考方案7】：

运行以下命令：

expo install react-native-safe-area-context

expo 会选择正确的版本然后安装。

【参考方案8】：

使用推荐的 npm i react-navigation-stack t 解决这个错误

【参考方案9】：

直接从项目目录启动 Metro Bundler 对我有用。

# 清理缓存 rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all

# 直接启动 Metro Bundler react-native start

# 现在在另一个选项卡中运行react-native run-android 或react-native run-ios

【参考方案10】：

要使用 React Navigation，您需要运行以下命令

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

或

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

【参考方案11】：

我认为这是由于 expo 和安全区域上下文的版本对不兼容。 你应该尝试运行这个：

npm 卸载 react-native-safe-area-context

之后，你运行这个：

expo install react-native-safe-area-context

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

【参考方案12】：

分两步：

npm i -g expo expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

【参考方案13】：

感谢您的解决方案，它帮助我解决了问题

npm i -g expo

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

react-native start

【参考方案14】：

如果您使用的是@react-native/stack，那么在安装它之前使用以下命令安装它的依赖项

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

阅读https://reactnavigation.org/docs/getting-started/的文档

【参考方案15】：

可能有多种解决方案，对我来说这是 react native 造成的错误。因此，在删除节点模块和其他命令之前，请检查 app 中所有 .js 文件中的 imports。 在我的情况下import TestScheduler from 'jest'; 这一行自动添加到 .js 文件之一。我删除了这条线，它对我有用。

【参考方案16】：

运行这个命令：npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

【讨论】：

请解释为什么您的解决方案可以解决问题，以便其他人能够理解。

【参考方案17】：

安装 “@react-native-community/masked-view” “反应原生安全区域上下文”

为我工作