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

42

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

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

Gautam Shrivastav
sumber
1
periksa react-native-safe-area-contextdi modul simpul Anda, react-navigation-stackmengharuskan itu tetapi modul simpul Anda tidak memilikinya
Jigar Shah

Jawaban:

32

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

Lenoarod
sumber
Sekarang saya mendapatkan kesalahan inierror: 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
Dan sebenarnya semuanya bekerja dengan baik di proyek saya sebelumnya. Sekarang sedang menunjukkan masalah ini.
Gautam Shrivastav
Anda harus tahu sejak react-asli 0,6, banyak perpustakaan telah menghapus bentuk core asli-reaksi. masalah ini seperti masalah awal, baca tautan ini [ github.com/react-native-community/react-native-masked-view]
Lenoarod
7
Nah setelah melakukan apa yang Anda katakan dalam jawaban Anda, saya juga harus menginstal @react-native-community/masked-viewuntuk memperbaikinya. Kemudian kode saya berhasil. Terima kasih untuk bantuannya.
Gautam Shrivastav
1
Ya, ini ditulis dalam catatan rilis github.com/react-navigation/stack/releases/tag/v2.0.1
mexique1
20

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

Arash Rabiee
sumber
Modul tidak ditemukan: Tidak dapat menyelesaikan LOL 'react-native-screens'
Dr.G
sial, itu benar hahaha
Kai
15

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.

Antonio Jack
sumber
Untuk versi asli ke 0.60atas, gunakan benang sebagai ganti npm dan jangan menautkan .
Fatih Mert Doğancan
4

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
Kim Thành Vũ
sumber
Saya sudah melakukan ini tetapi tidak berhasil.
Gautam Shrivastav
2

salin semua dan tempel di terminal

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

bekerja untukku

Mahdi Hakami
sumber
1

Jalankan yang berikut ini:

expo install react-native-safe-area-context

expo akan memilih versi yang tepat dan kemudian menginstalnya.

Joey Smith
sumber
1

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

Umer Javed
sumber
1

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

Milan.Telepon
sumber