Otrzymywanie tego błędu: błąd: nieudane wiązanie: Błąd: Nie można rozwiązać modułu `Reaguj-natywny-bezpieczny-obszar-kontekst`

Ten błąd pojawia się po uruchomieniu aplikacji:

błąd: wiązanie nie powiodło się: Błąd: nie można rozwiązać modułu react-native-safe-area-contextz node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: w projekcie nie można znaleźć kontekstu native-safe-area-area-kontekst.

Ale to samo zrobiłem dla mojej starej wersji demo. Działa idealnie dobrze.

Nie wiem, co robię źle tutaj. Proszę sprawdzić mój kod:

Do instalacji:

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;

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

Jestem nowy w React-Native. Pomóż mi to naprawić.

Myślę, że problem tkwi w tym SafeAreaView, że w nowej wersji z reakcją natywną został migrowany react-native-community/react-native-safe-area-view. jeśli chcesz użyć SafeAreaView, powinieneś go najpierw zainstalować.

nowe zastosowanie wygląda następująco:

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

do instalowania go można użyć następujących poleceń:
yarn add react-native-safe-area-view react-native-safe-area-context.

jeśli nie korzystasz z automatycznego łączenia, musisz je również połączyć. Aby uzyskać szczegółowe informacje na ten temat, zobacz ten link

To trochę zabawne, chciałem dodać nawigację, więc dodałem

npm install - zapisz reaguj nawigację

aby to działało dobrze, musiałem dodać:

expo install reag-native-gest-handler reaguj-native-reanimated

Potem mam

Nie można rozwiązać problemu „reaguj-natywny-bezpieczny-obszar-kontekst” Dodałem więc:

expo zainstaluj reaguj-nawigacja-stos

expo zainstaluj reaguj-natywny-bezpieczny-widok-obszaru reaguj-natywny-bezpieczny-obszar-kontekst

wtedy mam

nie udało się utworzyć pakietu: Błąd: nie można rozwiązać modułu @react-native-community/masked-view

Więc szukałem widoku zamaskowanego (który obecnie nie jest obsługiwany przez expo, zgodnie z jego dokumentem git). Potem dowiedziałem się, że używam kota:

expo install @ reaktor-native-community / masked-view, który może działać lub nie :)

Dlatego odtąd korzystam z następujących poleceń na początku wszystkich moich projektów rodzimych reagowania, aby móc poprawnie korzystać z nawigacji:

npm install - zapisz reaguj nawigację

expo install reag-native-gest-handler-reag-native-reanimated reag-navigation-stack

expo zainstaluj reaguj-natywny-bezpieczny-widok-obszaru reaguj-natywny-bezpieczny-obszar-kontekst

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

Po uruchomieniu tych poleceń:

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

To spowodowało błąd dotyczący widoku zamaskowanego, więc musiałem również uruchomić, npm i @react-native-community/masked-viewa następnie mój kod można teraz pomyślnie uruchomić na urządzeniu fizycznym z Androidem.

Dzięki Lenoarod i Gautam Shrivastav za wskazanie właściwego kierunku.

Myślę, że brakuje Ci zależności linków do swojego projektu, więc możesz spróbować, jak poniżej:

Z React Native 0.6 lub nowszym:

W systemie iOS upewnij się, że masz zainstalowane Cocoapods i uruchom:

cd ios
pod install
cd ..

Z React native 0.59 i niższym spróbuj:

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

skopiuj wszystko i wklej w terminalu

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

Pracuj dla mnie

Uruchom następujące czynności:

expo install react-native-safe-area-context

expo wybierze odpowiednią wersję, a następnie ją zainstaluje.

użyj polecenia polecam npm i reaguj-nawigacja-stos t rozwiązać ten błąd

Uruchamianie Metro Bundlera bezpośrednio z katalogu projektu działa dla mnie. Czy ktoś może mi powiedzieć, czy to też działa dla nich?

# Wyczyść pamięć podręczną rm -rf $ TMPDIR / reaguj ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; watchman watch-del-all

* # Start Metro Bundler bezpośrednio reaguje na start macierzysty

* # Teraz uruchom react-native run-androidlub react-native run-iosw innej zakładce