Diesen Fehler erhalten: Fehler: Bündelung fehlgeschlagen: Fehler: Das Modul "React-Native-Safe-Area-Kontext" kann nicht aufgelöst werden

Ich erhalte diesen Fehler, nachdem ich meine App ausgeführt habe:

Fehler: Bündelung fehlgeschlagen: Fehler: Modul konnte nicht aufgelöst werden react-native-safe-area-contextvon node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-area-context konnte im Projekt nicht gefunden werden.

Aber das gleiche, was ich für meine alte Demo getan hatte. Es hat einwandfrei funktioniert.

Ich weiß nicht, was ich hier falsch mache. Bitte überprüfen Sie meinen Code:

Zur Installation:

1. Reagieren Sie auf Native Navigation & Gesture Handler:

npm install --save react-navigation

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

2. Native Stack reagieren:

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;

Und 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>
    );
  }
}

Ich bin neu bei React-Native. Bitte helfen Sie mir, dies zu beheben.

Ich denke, das Problem liegt in der SafeAreaViewneuen reaktionsnativen Version, auf die migriert wurde react-native-community/react-native-safe-area-view. Wenn Sie verwenden möchten SafeAreaView, sollten Sie es zuerst installieren.

Die neue Verwendung ist wie folgt:

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>
  );
}

Für die Installation können Sie die folgenden Befehle verwenden :
yarn add react-native-safe-area-view react-native-safe-area-context.

Wenn Sie keine automatische Verknüpfung verwenden, müssen Sie diese auch verknüpfen. Einzelheiten dazu finden Sie unter diesem Link

Es ist ein bisschen lustig, ich wollte Navigation hinzufügen, also habe ich hinzugefügt

npm install - Save React-Navigation

Damit dies gut funktioniert, musste ich hinzufügen:

expo install reagiere-native-gesten-handler reagiere-native-wiederbelebt

Dann habe ich

"React-Native-Safe-Area-Kontext" konnte nicht aufgelöst werden. Also fügte ich hinzu:

Expo installieren React-Navigation-Stack

expo install react-native-safe-area-view reag-native-safe-area-Kontext

dann habe ich

Bündelung fehlgeschlagen: Fehler: Modul kann nicht aufgelöst werden @react-native-community/masked-view

Also habe ich nach der maskierten Ansicht gesucht (die laut Git-Dokument derzeit nicht von der Expo unterstützt wird). Dann fand ich heraus, dass ich Katze benutze:

expo install @ react-native-community / maskierte-Ansicht, die funktionieren könnte oder nicht :)

Daher verwende ich von nun an zu Beginn aller meiner reaktionsnativen Projekte die folgenden Befehle, um die Navigation richtig verwenden zu können:

npm install - Save React-Navigation

expo install reagiere-nativen-gesten-handler reagiere-nativen-wiederbelebten reaktionsnavigationsstapel

expo install react-native-safe-area-view reag-native-safe-area-Kontext

expo install @ react-native-community / maskierte-Ansicht

Nach dem Ausführen dieser Befehle:

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

Es wurde ein Fehler in Bezug auf die maskierte Ansicht npm i @react-native-community/masked-viewangezeigt , sodass ich auch ausführen musste und mein Code nun erfolgreich auf einem physischen Android-Gerät ausgeführt werden kann.

Vielen Dank an Lenoarod und Gautam Shrivastav für den Hinweis auf die richtige Richtung.

Ich denke, Sie vermissen die Linkabhängigkeit mit Ihrem Projekt, also können Sie Folgendes versuchen:

Mit React Native 0.6 oder höher:

Stellen Sie unter iOS sicher, dass Cocoapods installiert sind und ausgeführt werden:

cd ios
pod install
cd ..

Mit React native 0.59 und niedriger versuchen Sie:

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

Kopieren Sie alle und fügen Sie sie in das Terminal ein

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

arbeite für mich

Führen Sie Folgendes aus:

expo install react-native-safe-area-context

expo wählt die richtige Version aus und installiert sie dann.

Verwenden Sie das Commend npm, um diesen Fehler zu beheben

Das Starten des Metro Bundlers direkt aus dem Projektverzeichnis funktioniert für mich. Kann mich jemand wissen lassen, ob es auch für sie funktioniert?

# Cache leeren rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; Wächter Watch-del-All

* # Starten Sie Metro Bundler direkt reaktionsstart

* # Jetzt ausführen react-native run-androidoder react-native run-iosin einer anderen Registerkarte