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


42

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

오류 : 번들링 실패 : 오류 : 모듈을 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

  1. 네이티브 스택 반응 :

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


1
react-native-safe-area-context노드 모듈에서 확인 react-navigation-stack해야하지만 노드 모듈에는 없습니다
Jigar Shah

답변:


32

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

자동 링크를 사용하지 않는 경우 자동 링크도 연결해야합니다. 그것에 대한 자세한 내용은이 링크를 참조하십시오


지금은이 오류를 얻고있다error: 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.
가우 탐 Shrivastav

그리고 실제로 이전 프로젝트에서 모든 것이 잘 작동했습니다. 이제이 문제가 표시됩니다.
Gautam Shrivastav

react-native 0.6 이후로 많은 라이브러리가 react-native core에서 제거되었습니다. 사전 문제와 같은이 문제는이 링크를 읽으십시오 [ github.com/react-native-community/react-native-masked-view]
Lenoarod

7
당신의 대답에서 말한 것을 마친 후에도 @react-native-community/masked-view그것을 고치기 위해 설치 해야했습니다. 그런 다음 코드가 성공적으로 작동했습니다. 도와 주셔서 감사합니다.
Gautam Shrivastav


20

조금 재밌어요. 네비게이션을 추가하고 싶었습니다.

npm install-저장 반응 탐색

이것이 잘 작동하려면 추가해야했습니다.

엑스포 설치 반응 네이티브 제스처 처리기 반응 네이티브 애니메이션

그런 다음

"react-native-safe-area-context"를 해결할 수 없으므로 다음을 추가했습니다.

박람회 설치 반응 탐색 스택

엑스포 설치 반응-안전-안전-면적-반응-안전-안전-면적-문맥

그때 나는 얻었다

번들링 실패 : 오류 : 모듈을 확인할 수 없습니다 @react-native-community/masked-view

그래서 마스크 뷰를 검색했습니다 (현재 git 문서에 따라 엑스포에서 지원되지 않습니다). 그런 다음 고양이 사용을 알았습니다.

엑스포는 @ react-native-community / masked-view를 설치합니다. :)

따라서 이제부터는 내 반응 기본 프로젝트가 모두 시작될 때 탐색을 올바르게 사용할 수 있도록 다음 명령을 사용합니다.

npm install-저장 반응 탐색

엑스포 설치 반응 네이티브 제스처 핸들러 처리 반응 네이티브 재구성 반응 탐색 스택

엑스포 설치 반응-안전-안전-면적-반응-안전-안전-면적-문맥

엑스포 설치 @ react-native-community / masked-view


모듈을 찾을 수 없음 : '반응 형 네이티브 스크린'LOL을 해결할 수 없음
Dr.G

젠장, 사실이야 하하하
카이

15

이 명령을 실행 한 후 :

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 물리적 장치에서 코드를 성공적으로 실행할 수 있습니다.

올바른 방향을 지적 해 주신 LenoarodGautam Shrivastav 에게 감사드립니다 .


반응 기본 버전 0.60이상에서는 npm 대신 원사를 사용하고 링크하지 마십시오 .
Fatih Mert Doğancan

4

나는 당신이 당신의 프로젝트와 링크 depency를 그리워 그리워서 다음과 같이 시도 할 수 있다고 생각합니다 :

React Native 0.6 이상 :

iOS에서 Cocoapods를 설치하고 실행 했는지 확인하십시오 .

cd ios
pod install
cd ..

React native 0.59 이하 시도 :

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

나는 이미 이것을했지만 운이 없다.
Gautam Shrivastav

2

모두 복사하여 터미널에 붙여 넣기

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

나를 위해 일해


1

다음을 실행하십시오.

expo install react-native-safe-area-context

expo 올바른 버전을 선택한 다음 설치합니다.



1

프로젝트 디렉토리에서 Metro Bundler를 직접 시작하면 나에게 적합합니다. 그것이 그들에게도 효과가 있는지 알려줄 수 있습니까?

# 캐시 정리 rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; 파수꾼 watch-del-all

* # Metro Bundler 직접 반응 네이티브 시작 시작

* # 이제 실행 react-native run-android하거나 react-native run-ios다른 탭에서

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.