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

42

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

  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;

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.

Gautam Shrivastav
la source
1
vérifier react-native-safe-area-contextdans vos modules de nœuds, react-navigation-stacknécessite cela, mais vos modules de nœuds n'ont pas cela
Jigar Shah

Réponses:

32

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

Lenoarod
la source
Maintenant, je reçois cette erreurerror: 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
Et en fait, tout fonctionnait bien dans mon projet précédent. Maintenant, il montre ce problème.
Gautam Shrivastav
vous devez savoir que depuis react-native 0.6, de nombreuses bibliothèques ont supprimé le noyau react-native. ce problème comme pré problème, lisez ce lien [ github.com/react-native-community/react-native-masked-view]
Lenoarod
7
Eh bien, après avoir fait ce que vous avez dit dans votre réponse, j'ai également dû installer @react-native-community/masked-viewpour le réparer. Ensuite, mon code a fonctionné avec succès. Merci pour l'aide.
Gautam Shrivastav
1
Oui, cela est écrit dans les notes de version github.com/react-navigation/stack/releases/tag/v2.0.1
mexique1
20

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

Arash Rabiee
la source
Module introuvable: impossible de résoudre le LOL
react
bon sang, c'est vrai hahaha
Kai
15

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.

Antonio Jack
la source
Pour réagir à la version native 0.60et supérieure, utilisez yarn au lieu de npm et ne liez pas .
Fatih Mert Doğancan
4

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
Kim Thành Vũ
la source
Je l'ai déjà fait mais pas de chance.
Gautam Shrivastav
2

tout copier et coller dans le terminal

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

travaille pour moi

Mahdi Hakami
la source
1

Exécutez ce qui suit:

expo install react-native-safe-area-context

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

Joey Smith
la source
1

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

Umer Javed
la source
1

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

Milan.Patel
la source