Obtention de cette erreur: erreur: échec du regroupement: erreur: impossible de résoudre le module `react-native-safe-area-context`

Je reçois cette erreur après avoir exécuté mon application:

erreur: échec du regroupement: erreur: impossible de résoudre le module à react-native-safe-area-contextpartir de node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-area-context est introuvable dans le projet.

Mais la même chose que j'avais fait pour mon ancienne démo. Cela a parfaitement fonctionné.

Je ne sais pas ce que je fais mal ici. Veuillez vérifier mon code:

Pour l'installation:

1. React Native Navigation & Gesture Handler:

npm install --save react-navigation

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

2. 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;

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

Je suis nouveau sur React-Native. Veuillez m'aider à résoudre ce problème.

Je pense que le problème est dans le SafeAreaView, pour la nouvelle version native de React, il a migré vers react-native-community/react-native-safe-area-view. si vous voulez l'utiliser SafeAreaView, vous devez d'abord l'installer.

la nouvelle utilisation est la suivante:

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

pour l' installer , vous pouvez utiliser les commandes suivantes:
yarn add react-native-safe-area-view react-native-safe-area-context.

si vous n'utilisez pas la liaison automatique, vous devez également la lier. pour plus de détails à ce sujet, voir ce lien

C'est un peu drôle, je voulais ajouter la navigation alors j'ai ajouté

npm install --save react-navigation

pour que cela fonctionne bien, j'ai dû ajouter:

expo install react-native-gesture-handler react-native-reeanimated

Alors j'ai

Impossible de résoudre le "contexte de zone de sécurité natif réactif" J'ai donc ajouté:

expo install react-navigation-stack

expo install react-native-safe-area-view contexte de react-native-safe-area

alors j'ai

échec du regroupement: erreur: impossible de résoudre le module @react-native-community/masked-view

J'ai donc recherché la vue masquée (qui n'est actuellement pas prise en charge par l'expo, selon son document git). Ensuite, j'ai découvert que j'utilisais un chat:

expo install @ react-native-community / masked-view qui pourrait fonctionner ou non :)

Par conséquent, à partir de maintenant, j'utilise les commandes suivantes au début de tous mes projets natifs réactifs, pour pouvoir utiliser correctement la navigation:

npm install --save react-navigation

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

expo install react-native-safe-area-view contexte de react-native-safe-area

expo install @ react-native-community / masked-view

Après avoir exécuté ces commandes:

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

Cela m'a provoqué une erreur concernant la vue masquée, j'ai donc dû également exécuter npm i @react-native-community/masked-viewet mon code peut maintenant être exécuté avec succès sur un appareil physique Android.

Merci à Lenoarod et Gautam Shrivastav d' avoir indiqué la bonne direction.

Je pense que vous manquez la dépendance du lien avec votre projet, vous pouvez donc essayer comme ci-dessous:

Avec React Native 0.6 ou supérieur:

Sur iOS, assurez-vous que les Cocoapods sont installés et exécutés:

cd ios
pod install
cd ..

Avec React native 0.59 et inférieure, essayez:

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

tout copier et coller dans le terminal

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

travaille pour moi

Exécutez ce qui suit:

expo install react-native-safe-area-context

expo sélectionnera la bonne version puis l'installera.

utiliser la recommandation npm i react-navigation-stack t résoudre cette erreur

Le démarrage de Metro Bundler directement à partir du répertoire du projet fonctionne pour moi. Quelqu'un peut-il me faire savoir si cela fonctionne aussi pour lui?

# Nettoyer le cache rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / hâte- ; rm -rf $ TMPDIR / metro- ; watchman watch-del-all

* # Démarrer Metro Bundler réagit directement au démarrage natif

* # Maintenant, lancez react-native run-androidou react-native run-iosdans un autre onglet