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

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

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

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

É 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

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.

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

copie tudo e cole no terminal

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

trabalhe para mim

Execute o seguinte:

expo install react-native-safe-area-context

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

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

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