Ottenere questo errore: errore: raggruppamento non riuscito: errore: impossibile risolvere il modulo "reagire-nativo-area-sicura-contesto"


42

Ricevo questo errore dopo aver eseguito la mia app:

errore: raggruppamento non riuscito: errore: impossibile risolvere il modulo react-native-safe-area-contextda node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: reazione-nativo-area-sicura-contesto non è stato trovato all'interno del progetto.

Ma la stessa cosa che avevo fatto per la mia vecchia demo. Ha funzionato perfettamente.

Non so cosa sto facendo di sbagliato qui. Per favore controlla il mio codice:

Per l'installazione:

  1. Gestore di gesti e gesti nativi React:

npm install --save react-navigation

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

  1. Stack nativo di React:

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;

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

Sono nuovo di React-Native. Aiutatemi a risolvere questo problema.


1
controllare react-native-safe-area-contextnei moduli del nodo, react-navigation-stackrichiede che, ma i moduli del nodo non lo hanno
Jigar Shah

Risposte:


32

Penso che il problema sia nella SafeAreaView, per la nuova versione di reazione nativa, a cui è migrata react-native-community/react-native-safe-area-view. se si desidera utilizzare SafeAreaView, è necessario installarlo prima.

il nuovo uso è così:

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

per l'installazione di esso è possibile utilizzare i seguenti comandi:
yarn add react-native-safe-area-view react-native-safe-area-context.

se non si utilizza il collegamento automatico, è necessario collegarlo anche. per i dettagli, consultare questo link


Ora sto ricevendo questo erroreerror: 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 il

E in realtà tutto funzionava bene nel mio precedente progetto. Ora sta mostrando questo problema.
Gautam Shrivastav il

dovresti sapere a partire dallo 0,6 nativo di reazione, molte librerie avevano rimosso il modulo di reazione nativo. questo problema come pre-problema, leggi questo link [ github.com/react-native-community/react-native-masked-view]
Lenoarod

7
Bene, dopo aver fatto quello che hai detto nella tua risposta, ho anche dovuto installare @react-native-community/masked-viewper risolverlo. Quindi il mio codice ha funzionato correttamente. Grazie per l'aiuto.
Gautam Shrivastav,

1
Sì, questo è scritto nelle note di rilascio github.com/react-navigation/stack/releases/tag/v2.0.1
mexique1

20

È un po 'divertente, volevo aggiungere la navigazione, quindi ho aggiunto

npm install --save reagire-navigazione

per farlo funzionare bene ho dovuto aggiungere:

installazione expo reagire-nativo-gesto-gestore reagire-nativo-rianimato

Poi ho ottenuto

Incapace di risolvere "context-native-safe-area-context" Quindi ho aggiunto:

expo installa reagire-navigazione-stack

expo installa area-reattiva-nativa-sicura-area-vista-area-nativa-sicura-contesto-contesto

poi ho ottenuto

raggruppamento non riuscito: errore: impossibile risolvere il modulo @react-native-community/masked-view

Quindi ho cercato la vista mascherata (che attualmente non è supportata dall'expo, secondo il suo documento git). Poi ho scoperto che uso il gatto:

expo install @ React-native-community / masked-view che potrebbe funzionare o meno :)

Pertanto, da ora in poi utilizzo i seguenti comandi all'inizio di tutti i miei progetti di reazione nativa, per essere in grado di utilizzare correttamente la navigazione:

npm install --save reagire-navigazione

expo install reagire-native-gesture-handler reagire-native-rianimato reagire-navigazione-stack

expo installa area-reattiva-nativa-sicura-area-vista-area-nativa-sicura-contesto-contesto

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


Modulo non trovato: impossibile risolvere il LOL di "
reattivo

accidenti, è vero ahahah
Kai il

15

Dopo aver eseguito questi comandi:

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

Mi ha provocato un errore sulla vista mascherata, quindi ho dovuto anche eseguire npm i @react-native-community/masked-viewe quindi il mio codice ora può essere eseguito correttamente sul dispositivo fisico Android.

Grazie a Lenoarod e Gautam Shrivastav per aver indicato la giusta direzione.


Per reagire alla versione nativa 0.60e successive, usa il filo invece di npm e non collegare .
Fatih Mert Doğancan,

4

Penso che manchi la dipendenza dai collegamenti con il tuo progetto, quindi puoi provare come di seguito:

Con React Native 0.6 o versione successiva:

Su iOS, assicurati di avere Cocoapods installato ed eseguire:

cd ios
pod install
cd ..

Con React nativo 0,59 e prova inferiore:

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

L'ho già fatto, ma senza fortuna.
Gautam Shrivastav il

2

copia tutto e incolla nel terminale

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

lavora per me


1

Eseguire quanto segue:

expo install react-native-safe-area-context

expo selezionerà la versione corretta e quindi la installerà.


1

utilizzare il comando npm i reagire-navigazione-stack per risolvere questo errore


1

Avvio del Metro Bundler direttamente dalla directory del progetto funziona per me. Qualcuno può farmi sapere se funziona anche per loro?

# Clean cache rm -rf $ TMPDIR / reazioni- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; watchman watch-del-all

* # Avvia Metro Bundler reagisce direttamente all'avvio nativo

* # Ora esegui react-native run-androido react-native run-iosin un'altra scheda

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.