การได้รับข้อผิดพลาดนี้: ข้อผิดพลาด: การรวมกลุ่มล้มเหลว: ข้อผิดพลาด: ไม่สามารถแก้ไขโมดูล

ฉันได้รับข้อผิดพลาดนี้หลังจากเรียกใช้แอพของฉัน:

ข้อผิดพลาด: การรวมกลุ่มล้มเหลว: ข้อผิดพลาด: ไม่สามารถแก้ไขโมดูลได้react-native-safe-area-contextจากnode_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: ไม่พบการตอบสนองภายในพื้นที่ปลอดภัยบริบทภายในโครงการ

แต่สิ่งเดียวกันกับที่ฉันได้ทำเพื่อการสาธิตเก่าของฉัน มันทำงานได้ดีอย่างสมบูรณ์

ฉันไม่รู้ว่าฉันทำอะไรผิดที่นี่ กรุณาตรวจสอบรหัสของฉัน:

สำหรับการติดตั้ง:

1. ตอบสนองเนทิฟนำทางและตัวจัดการท่าทาง:

npm install --save react-navigation

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

2. ตอบโต้ 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;

และ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>
    );
  }
}

ฉันใหม่สำหรับ React-Native โปรดช่วยฉันแก้ไขด้วย

ผมคิดว่าปัญหาอยู่ในสำหรับใหม่ตอบสนองพื้นเมืองรุ่นก็มีการอพยพไปSafeAreaView react-native-community/react-native-safe-area-viewหากคุณต้องการใช้SafeAreaViewคุณควรติดตั้งก่อน

การใช้งานใหม่เป็นเช่นนี้:

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

yarn add react-native-safe-area-view react-native-safe-area-contextสำหรับการติดตั้งนั้นคุณสามารถใช้คำสั่งต่อไปนี้:

หากคุณไม่ได้ใช้ลิงค์อัตโนมัติคุณจะต้องเชื่อมโยง สำหรับรายละเอียดเกี่ยวกับมันดูลิงค์นี้

มันตลกเล็กน้อยฉันต้องการเพิ่มการนำทางดังนั้นฉันจึงเพิ่ม

การติดตั้ง npm - บันทึกการตอบสนองการนำทาง

เพื่อให้ทำงานได้ดีฉันต้องเพิ่ม:

expo ติดตั้ง react-native-gesture-handler react-native-reanimated

จากนั้นฉันได้

ไม่สามารถแก้ไข "react-native-safe-area-context" ดังนั้นฉันจึงเพิ่ม:

expo ติดตั้ง react-navigation-stack

expo ติดตั้ง react-native-safe-area-view ปฏิกิริยา-native-safe-area-context

จากนั้นฉันได้

การรวมกลุ่มล้มเหลว: ข้อผิดพลาด: ไม่สามารถแก้ไขโมดูลได้ @react-native-community/masked-view

ดังนั้นฉันจึงค้นหา masked-view (ซึ่ง expo ในปัจจุบันไม่รองรับตามเอกสาร git) จากนั้นฉันก็พบว่าฉันใช้แมว:

expo install @ react-native-community / masked-view ซึ่งสามารถใช้งานได้หรือไม่ :)

ดังนั้นจากนี้ไปฉันใช้คำสั่งต่อไปนี้ในตอนเริ่มต้นของโปรเจ็กต์ตอบโต้พื้นเมืองทั้งหมดของฉัน

การติดตั้ง npm - บันทึกการตอบสนองการนำทาง

expo ติดตั้ง react-native-gesture-handler react-native-reanimated react-navigation-stack

expo ติดตั้ง react-native-safe-area-view ปฏิกิริยา-native-safe-area-context

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

หลังจากรันคำสั่งเหล่านี้:

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

มันแจ้งให้ฉันทราบข้อผิดพลาดเกี่ยวกับการปิดบังมุมมองดังนั้นฉันจึงต้องเรียกใช้npm i @react-native-community/masked-viewและตอนนี้รหัสของฉันสามารถทำงานบนอุปกรณ์ทางกายภาพของ Android ได้สำเร็จ

ขอบคุณLenoarodและGautam Shrivastav ที่ชี้ทิศทางที่ถูกต้อง

ฉันคิดว่าคุณพลาดการเชื่อมโยงกับโครงการของคุณเพื่อให้คุณสามารถลองได้ดังนี้:

ด้วย React Native 0.6 หรือสูงกว่า:

บน iOS ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งและเรียกใช้Cocoapods :

cd ios
pod install
cd ..

ด้วย React พื้นเมือง 0.59 และลองต่ำกว่า:

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

คัดลอกทั้งหมดและวางใน terminal

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

ทำงานให้ฉัน

รันสิ่งต่อไปนี้:

expo install react-native-safe-area-context

expo จะเลือกเวอร์ชั่นที่ถูกต้องจากนั้นทำการติดตั้ง

ใช้เอ็นพีอาร์ชมเชยฉันตอบสนองการนำทาง -t เพื่อแก้ไขข้อผิดพลาดนี้

การเริ่มต้น Metro Bundler โดยตรงจากไดเรกทอรีโครงการใช้งานได้สำหรับฉัน ใครช่วยบอกให้ฉันรู้ว่ามันใช้ได้กับพวกเขาด้วยหรือไม่

# ล้างแคช rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; ยามเฝ้าดูดูทั้งหมด

* # เริ่ม Metro Bundler ตอบสนองโดยตรงต่อการเริ่มต้นดั้งเดิม

* # ตอนนี้ทำงานreact-native run-androidหรือreact-native run-iosในแท็บอื่น