Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`

Question

我在运行我的应用程序后收到此错误：

error: bundling failed: Error: Unable to resolve module react-native-safe-area-context from node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-area-context could not be found within the project.

但我为我的旧演示所做的同样的事情。它工作得很好。

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

安装：

React Native 导航和手势处理程序：

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 的新手。我该如何解决这个问题？

Answer 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，你也必须link它。有关详细信息，请参阅此 link

Answer 2

我想你错过了 link 对你的项目的依赖，所以你可以尝试如下：

使用 React Native 0.6 或更高版本：

在 iOS 上，确保安装了 Cocoapods 并且运行:

cd ios
pod install
cd ..

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

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

Answer 3

全部复制并粘贴到终端

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

为我工作

Answer 4

运行执行这些命令后：

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

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

感谢Lenoarod and Gautam Shrivastav指点方向

Answer 5

运行以下：

expo install react-native-safe-area-context

expo 将select 正确的版本然后安装它。

Answer 6

使用命令 npm i react-navigation-stack t 解决这个错误

Answer 7

直接从项目目录启动 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 在另一个选项卡中

Answer 8

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

npm install --save react-navigation

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

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

然后我得到了

Unable to resolve "react-native-safe-area-context" So I added:

expo install react-navigation-stack

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

然后我得到了

bundling failed: Error: Unable to resolve module @react-native-community/masked-view

所以我搜索了遮蔽视图（根据其 git 文档，目前该展览不支持该视图）。然后我发现我可以使用：

expo install @react-native-community/masked-view which could work or not :)

因此，从现在开始，我在所有 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

Answer 9

正在安装以下两个，

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

对我有用

Answer 10

分两步：

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

Answer 11

要使用 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

Answer 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
react-native start

Answer 13

如果你使用@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/

上的文档

Answer 14

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

Answer 15

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

Answer 16

我认为这是由于 expo 和 safe area context 的版本对不兼容。你应该试试运行这个：

npm uninstall react-native-safe-area-context

之后，你运行这个：

expo 安装 react-native-safe-area-context

Answer 17

正在安装 “@react-native-community/masked-view” “react-native-safe-area-context”

对我有用

Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`

Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`

react-native

react-native-android

react-native-ios

react-native-navigation