Obtendo este erro: erro: falha no empacotamento: Erro: Não é possível resolver o módulo `reage-native-safe-area-context`


42

Estou recebendo esse erro depois de executar meu aplicativo:

erro: falha no empacotamento: erro: não foi possível resolver o módulo react-native-safe-area-contextde node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-safe-context-context não foi encontrado no projeto.

Mas a mesma coisa que eu fiz na minha antiga demo. Funcionou perfeitamente bem.

Não sei o que estou fazendo de errado aqui. Por favor, verifique meu código:

Para instalação:

  1. Reagir a navegação nativa e o gerenciador de gestos:

npm install --save react-navigation

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

  1. Reagir pilha nativa:

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

Eu sou novo no React-Native. Por favor me ajude a consertar isso.


11
verificar react-native-safe-area-contextnos módulos do nó, react-navigation-stackrequer isso, mas os módulos do nó não o têm
Jigar Shah

Respostas:


32

Penso que o problema está na SafeAreaView, para a nova versão react-native, foi migrada para react-native-community/react-native-safe-area-view. Se você deseja usar SafeAreaView, instale-o primeiro.

o novo uso é assim:

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

para instalá-lo, você pode usar os seguintes comandos:
yarn add react-native-safe-area-view react-native-safe-area-context.

se você não usar o link automático, também será necessário vinculá-lo. para mais detalhes, consulte este link


Agora estou recebendo esse erroerror: 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

E, na verdade, tudo estava funcionando bem no meu projeto anterior. Agora está mostrando esse problema.
Gautam Shrivastav

você deve saber que, desde o react-native 0.6, muitas bibliotecas removeram o núcleo react-native. este problema como pré-problema, leia este link [ github.com/react-native-community/react-native-masked-view]
Lenoarod

7
Bem, depois de fazer o que você disse na sua resposta, eu também tive que instalar @react-native-community/masked-viewpara corrigi-lo. Então meu código funcionou com sucesso. Obrigado pela ajuda.
Gautam Shrivastav

11
Sim, isso está escrito nas notas de lançamento github.com/react-navigation/stack/releases/tag/v2.0.1
mexique1

20

É um pouco engraçado, eu queria adicionar navegação, então eu adicionei

npm install --save reat-navigation

para que isso funcione bem, eu tive que adicionar:

expo install react-native-gesto-manipulador react-native-reanimated

Então eu peguei

Não foi possível resolver o "contexto de área segura de reagir nativo". Então, adicionei:

expo install react-navigation-stack

expo install reage-nativo-área-segura-view reaja-nativo-área segura-contexto

então eu peguei

falha no pacote: Erro: Não foi possível resolver o módulo @react-native-community/masked-view

Então, procurei a visualização mascarada (que atualmente não é suportada pela expo, de acordo com o documento git). Então eu descobri que eu uso gatos:

expo install @ react-native-community / masked-view que pode funcionar ou não :)

Portanto, a partir de agora eu uso os seguintes comandos no início de todos os meus projetos nativos do react, para poder usar a navegação corretamente:

npm install --save reat-navigation

expo install react-native-gesto-manipulador react-native-reanimated react-navigation-stack

expo install reage-nativo-área-segura-view reaja-nativo-área segura-contexto

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


Módulo não encontrado: Não é possível resolver o LOL '
react

caramba, é verdade hahaha
Kai

15

Depois de executar estes comandos:

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

Isso me levou a um erro sobre a exibição mascarada, então eu também tive que executar npm i @react-native-community/masked-view e, agora, meu código pode ser executado com êxito no dispositivo físico Android.

Agradecemos a Lenoarod e Gautam Shrivastav por apontarem a direção certa.


Para reagir à versão nativa 0.60e superior, use yarn em vez de npm e não vincule .
Fatih Mert Doğancan

4

Acho que você sente falta da dependência do link com seu projeto, para que você possa tentar como abaixo:

Com React Native 0.6 ou superior:

No iOS, verifique se você tem o Cocoapods instalado e execute:

cd ios
pod install
cd ..

Com o React nativo 0.59 e a tentativa mais baixa:

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

Eu já fiz isso, mas sem sorte.
Gautam Shrivastav

2

copie tudo e cole no terminal

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

trabalhe para mim


1

Execute o seguinte:

expo install react-native-safe-area-context

expo selecionará a versão correta e depois a instalará.


1

use a recomendação npm i react-navigation-stack para resolver este erro


1

Iniciar o Metro Bundler diretamente do diretório do projeto funciona para mim. Alguém pode me informar se também funciona para eles?

# Cache limpo rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; vigia vigia-tudo

* # Inicie o Metro Bundler diretamente reative o início nativo

* # Agora execute react-native run-androidou react-native run-iosem outra guia

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.