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

Question

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

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

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

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

用于安装：

1. 反应本机导航和手势处理程序：

npm install --save react-navigation

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

2. 反应原生堆栈：

npm install --save react-navigation-stack

应用程序.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.

如果您不使用自动链接，则还必须链接它。有关它的详细信息，请参阅此链接

Answer 2

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

npm install --save 反应导航

为此，我必须添加：

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 反应导航

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 3

运行这些命令后：

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和Gautam Shrivastav指出了正确的方向。

Answer 4

安装以下两个，

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

这对我有用

Answer 5

全部复制并粘贴到终端

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

为我工作

Answer 6

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

使用 React Native 0.6 或更高版本：

在 iOS 上，确保你安装了Cocoapods并运行：

cd ios
pod install
cd ..

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

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