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


42

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

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

但是我为以前的演示做过同样的事情。它工作得很好。

我不知道我在做什么错。请检查我的代码:

安装:

  1. React Native Navigation&Gesture Handler:

npm install --save react-navigation

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

  1. 反应本机堆栈:

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的新手。请帮助我解决此问题。


1
检查react-native-safe-area-context您的节点模块是否react-navigation-stack需要,但您的节点模块没有该节点
Jigar Shah

Answers:


32

我认为问题出在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

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


现在我遇到了这个错误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.
Gautam Shrivastav

实际上,在我之前的项目中,一切工作正常。现在正在显示此问题。
Gautam Shrivastav

您应该知道,由于react-native 0.6,许多库已从react-native核心中删除。像之前的问题一样,请阅读此链接[ github.com/react-native-community/react-native-masked-view]
Lenoarod

7
在按照您的回答说完之后,我还必须安装@react-native-community/masked-view修复它。然后我的代码成功运行了。谢谢您的帮助。
Gautam Shrivastav


20

有点有趣,我想添加导航,所以我添加了

npm install-保存反应导航

为了使它正常工作,我必须添加:

博览会安装react-native-gesture-handler react-native-animated

然后我得到了

无法解决“反应本地安全区域上下文”,因此我添加了:

博览会安装react-navigation-stack

世博会安装react-native-safe-area-view

然后我得到了

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

因此,我搜索了被遮罩的视图(根据其git文档,该博览会目前不支持该视图)。然后我发现我在用猫:

博览会安装@ react-native-community / masked-view可能有效或无效:)

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

npm install-保存反应导航

expo install react-native-gesture-handler react-native-reanimated反应导航堆栈

世博会安装react-native-safe-area-view

博览会安装@ react-native-community / masked-view


找不到模块:无法解析“反应本机”大声笑
Dr.G

该死的,这是真的哈哈哈
Kai

15

运行以下命令后:

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物理设备上成功运行。

感谢LenoarodGautam Shrivastav指出了正确的方向。


对于本机版本0.60及更高版本,请使用yarn而不是npm,并且不要链接
法提赫·梅特·多安坎

4

我认为您错过了项目的链接依赖程度,因此可以尝试以下操作:

使用React Native 0.6或更高版本:

在iOS上,确保已安装并运行Cocoapods

cd ios
pod install
cd ..

使用React native 0.59和更低的尝试:

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

我已经做到了,但是没有运气。
Gautam Shrivastav


1

运行以下命令:

expo install react-native-safe-area-context

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



1

直接从项目目录启动Metro Bundler对我有用。有人可以让我知道是否对他们也有用吗?

#清理缓存rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; 守望者

*#启动Metro Bundler直接进行本机启动

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.