このエラーの取得:エラー:バンドルに失敗しました:エラー:モジュール `react-native-safe-area-context`を解決できません


42

アプリを実行した後、このエラーが発生します:

エラー:バンドルに失敗しました:エラー:react-native-safe-area-contextからモジュールを解決できませんnode_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. React Native Stack:

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

回答:


32

問題はにあると思います。SafeAreaView新しい反応ネイティブバージョンでは、に移行しました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

反応ネイティブ0.6以降、多くのライブラリでは反応ネイティブコアが削除されています。この問題は事前の問題と同様に、このリンクを読んでください[ github.com/react-native-community/react-native-masked-view]
Lenoarod

7
まああなたの答えであなたが言ったことをした後、@react-native-community/masked-viewそれを修正するために私もインストールしなければなりませんでした。その後、私のコードは正常に動作しました。助けてくれてありがとう。
ゴータムシュリバスタフ

1
ええ、これはリリースノートgithub.com/react-navigation/stack/releases/tag/v2.0.1に
mexique1

20

ちょっとおもしろいので、ナビを追加したかったので追加しました

npm install --save react-navigation

これがうまく機能するために、私は追加する必要がありました:

エキスポインストール反応ネイティブジェスチャーハンドラ反応ネイティブアニメーション

次に得た

「react-native-safe-area-context」を解決できないため、次のように追加しました。

expo install react-navigation-stack

エキスポインストール反応ネイティブセーフエリアビュー反応ネイティブセーフエリアコンテキスト

それから私は得た

バンドルに失敗しました:エラー:モジュールを解決できません @react-native-community/masked-view

だから私はマスクビューを検索しました(gitドキュメントによれば、現在これはエキスポでサポートされていません)。それから私は猫の使用を見つけました:

expo install @ react-native-community / masked-view動作するかどうか:)

したがって、これからは、すべての反応ネイティブプロジェクトの開始時に次のコマンドを使用して、ナビゲーションを適切に使用できるようにします。

npm install --save react-navigation

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

エキスポインストール反応ネイティブセーフエリアビュー反応ネイティブセーフエリアコンテキスト

エキスポインストール@ react-native-community / masked-view


モジュールが見つかりません: 'react-native-screens'を解決できませんLOL
Dr.G

くそー、それは本当のハハハです
カイ

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以上に反応させるには、npmの代わりにyarnを使用し、リンクしないでください
Fatih MertDoğancan

4

あなたはあなたのプロジェクトのリンクの欠落を逃していると思うので、以下のように試すことができます:

React Native 0.6以降:

iOSでは、Cocoapodsがインストールされ、実行されていることを確認します。

cd ios
pod install
cd ..

Reactネイティブ0.59以下の場合:

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

私はこれをすでにやったが運が悪い。
Gautam Shrivastav

2

すべてをコピーしてターミナルに貼り付け

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

私のために働く


1

以下を実行します。

expo install react-native-safe-area-context

expo 適切なバージョンを選択してインストールします。


1

このエラーを解決するには、コマンドnpm i react-navigation-stackを使用してください


1

Metro Bundlerをプロジェクトディレクトリから直接起動すると、うまくいきます。それが彼らのためにも働くかどうか誰かが私に知らせることができますか?

#キャッシュを消去するrm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; ウォッチマンウォッチデルオール

*#Metro Bundlerを直接開始する

*#実行するreact-native run-androidreact-native run-ios、別のタブで

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.