Mendapat kesalahan ini: kesalahan: bundling gagal: Kesalahan: Tidak dapat menyelesaikan modul `react-native-safe-area-context`

Saya mendapatkan kesalahan ini setelah menjalankan Aplikasi saya:

kesalahan: bundling gagal: Kesalahan: Tidak dapat menyelesaikan modul react-native-safe-area-contextdari node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-area-context tidak dapat ditemukan dalam proyek.

Tetapi hal yang sama telah saya lakukan untuk demo lama saya. Ini bekerja dengan sangat baik.

Saya tidak tahu apa yang saya lakukan salah di sini. Silakan periksa kode saya:

Untuk menginstal:

1. Bereaksi Navigasi Asli & Penangan Gerakan:

npm install --save react-navigation

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

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

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

Saya baru mengenal React-Native. Tolong bantu saya untuk memperbaiki ini.

Saya pikir masalahnya ada di SafeAreaView, untuk versi reaksi-asli yang baru, telah dimigrasi ke react-native-community/react-native-safe-area-view. jika Anda ingin menggunakannya SafeAreaView, Anda harus menginstalnya terlebih dahulu.

penggunaan baru seperti ini:

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

untuk menginstalnya Anda dapat menggunakan perintah berikut:
yarn add react-native-safe-area-view react-native-safe-area-context .

jika Anda tidak menggunakan tautan otomatis, Anda juga harus menautkannya. untuk detailnya, lihat tautan ini

Agak lucu, saya ingin menambahkan navigasi jadi saya menambahkan

npm instal --simpan navigasi reaksi

agar ini berfungsi dengan baik, saya harus menambahkan:

expo instal react-native-gesture-handler react-native-reanimated

Lalu aku mengerti

Tidak dapat menyelesaikan "react-native-safe-area-context" Jadi saya menambahkan:

expo instal reaksi-navigasi-tumpukan

expo instal reaksi-native-safe-area-view bereaksi-native-safe-area-konteks

lalu aku mengerti

bundling gagal: Kesalahan: Tidak dapat menyelesaikan modul @react-native-community/masked-view

Jadi saya mencari tampilan tertutup (yang saat ini tidak didukung oleh pameran, menurut dokumen gitnya). Kemudian saya tahu saya menggunakan kucing:

expo instal @ react-native-community / masked-view yang bisa berfungsi atau tidak :)

Oleh karena itu, mulai sekarang saya menggunakan perintah berikut di awal semua proyek asli saya, untuk dapat menggunakan navigasi dengan benar:

npm instal --simpan navigasi reaksi

expo instal react-native-gesture-handler react-native-reanimated react-navigation-stack

expo instal reaksi-native-safe-area-view bereaksi-native-safe-area-konteks

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

Setelah menjalankan perintah ini:

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

Itu mendorong saya kesalahan tentang tampilan bertopeng, jadi saya juga harus menjalankan npm i @react-native-community/masked-view dan kemudian kode saya sekarang dapat berhasil dijalankan pada perangkat fisik Android.

Terima kasih kepada Lenoarod dan Gautam Shrivastav karena menunjukkan arah yang benar.

Saya pikir Anda kehilangan ketergantungan tautan dengan proyek Anda sehingga Anda dapat mencoba seperti di bawah ini:

Dengan Bereaksi Asli 0,6 atau lebih tinggi:

Di iOS, pastikan Anda telah menginstal dan menjalankan Cocoapods :

cd ios
pod install
cd ..

Dengan Bereaksi asli 0,59 dan coba lebih rendah:

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

salin semua dan tempel di terminal

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

bekerja untukku

Jalankan yang berikut ini:

expo install react-native-safe-area-context

expo akan memilih versi yang tepat dan kemudian menginstalnya.

gunakan perintah npm saya bereaksi-navigasi-stack t mengatasi kesalahan ini

Memulai Metro Bundler langsung dari direktori proyek bekerja untuk saya. Adakah yang bisa memberi tahu saya jika itu berhasil untuk mereka juga?

# Bersihkan cache rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; penjaga penjaga-del-semua

* # Mulai Metro Bundler langsung bereaksi mulai asli

* # Sekarang jalankan react-native run-androidatau react-native run-iosdi tab lain