[react-native] 이 오류 발생 : 오류 : 번들링 실패 : 오류 :`react-native-safe-area-context ‘모듈을 해결할 수 없습니다.

앱을 실행 한 후이 오류가 발생합니다.

오류 : 번들링 실패 : 오류 : 모듈을 react-native-safe-area-context확인할 수 없습니다 node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: 프로젝트 내에서 react-native-safe-area-context를 찾을 수 없습니다.

그러나 이전 데모에서했던 것과 같은 일입니다. 완벽하게 작동했습니다.

내가 여기서 뭘 잘못하고 있는지 모르겠다. 내 코드를 확인하십시오 :

설치 :

1. 기본 탐색 및 제스처 처리기 반응 :

npm install --save react-navigation

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

2. 네이티브 스택 반응 :

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를 처음 사용합니다. 이 문제를 해결하도록 도와주세요.

답변

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

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

cd ios
pod install
cd ..

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

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

expo install react-native-safe-area-context