Bu hatayı alıyorum: hata: paketleme başarısız oldu: Hata: `tepki-yerel-güvenli-alan-bağlam 'modülü çözülemedi


42

Uygulamamı çalıştırdıktan sonra bu hatayı alıyorum:

Hata: Başarısız bundling: Hata: kararlılık modülüne react-native-safe-area-contextgelennode_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js : tepki yerli güvenli alan-bağlam proje içinde bulunamadı.

Ama aynı eski demo için yaptığım şey. Mükemmel çalıştı.

Burada neyi yanlış yaptığımı bilmiyorum. Lütfen kodumu kontrol et:

Kurulum için:

  1. React Native Navigation ve Hareket İşleyici:

npm install --save react-navigation

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

  1. Yerel Yığını Tepki Et:

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;

Ve 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'da yeniyim. Lütfen bunu düzeltmeme yardım et.


1
react-native-safe-area-contextDüğüm modüllerinizde kontrol edin , react-navigation-stackgerektirir ancak düğüm modüllerinizde bu yoktur
Jigar Shah

Yanıtlar:


32

Bence sorun, SafeAreaViewyeni tepkime-yerel versiyon için taşındı react-native-community/react-native-safe-area-view. kullanmak istiyorsanız SafeAreaView, önce yüklemelisiniz.

yeni kullanım şöyle:

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

yüklemek için aşağıdaki komutları kullanabilirsiniz:
yarn add react-native-safe-area-view react-native-safe-area-context .

otomatik bağlantı kullanmazsanız, bağlantı oluşturmalısınız. bununla ilgili ayrıntılar için bu bağlantıya bakın


Şimdi bu hatayı alıyorumerror: 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

Aslında önceki projemde her şey yolunda gidiyordu. Şimdi bu sorunu gösteriyor.
Gautam Shrivastav

tepkime doğal 0.6 beri, birçok kütüphane tepkime doğal çekirdek kaldırıldı. bu problemi ön problem gibi okuyun [ github.com/react-native-community/react-native-masked-view]
Lenoarod

7
Cevabınızda söylediklerinizi yaptıktan sonra da @react-native-community/masked-viewdüzeltmek için kurmam gerekiyordu. Sonra benim kod başarıyla çalıştı. Yardım için teşekkürler.
Gautam Shrivastav


20

Biraz komik, navigasyon eklemek istedim bu yüzden ekledim

npm install - kaydet tepkin gezinme

Bunun iyi çalışması için eklemek zorunda kaldım:

expo install tepki-doğal-jest-işleyici tepki-doğal-yeniden canlandırılmış

Sonra anladım

"Tepki-yerel-güvenli-alan-bağlam" çözümlenemiyor Bu yüzden ekledim:

expo install tepki-gezinme yığını

expo install tepki-yerel-güvenli-alan-görünümü tepki-doğal-güvenli-alan-bağlam

o zaman aldım

paketleme başarısız oldu: Hata: Modül çözülemedi @react-native-community/masked-view

Bu yüzden maskelenmiş görünümü aradım (git belgesine göre şu anda expo tarafından desteklenmiyor). Sonra ben kedi kullanımı öğrendim:

expo install @ tepki-yerli-topluluk / maskeli-görünüm olabilir ya da değil :)

Bu nedenle, bundan sonra navigasyonu düzgün kullanabilmek için tüm yerel reaksiyon projelerimin başında aşağıdaki komutları kullanıyorum:

npm install - kaydet tepkin gezinme

expo install tepki-yerel-jest-işleyici tepki-yerel-yeniden canlandırılmış tepki-navigasyon-yığını

expo install tepki-yerel-güvenli-alan-görünümü tepki-doğal-güvenli-alan-bağlam

expo install @ tepki-yerel-topluluk / maskeli görünüm


Modül bulunamadı: '
React

kahretsin, gerçek hahaha
Kai

15

Bu komutları çalıştırdıktan sonra:

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

Bana maskeli görünüm hakkında bir hata verdi, bu yüzden de çalıştırmak zorunda kaldım npm i @react-native-community/masked-view ve kodum şimdi Android fiziksel cihazda başarıyla çalıştırılabilir.

Lenoarod ve Gautam Shrivastav'a doğru yönü gösterdikleri için teşekkürler .


Doğal sürüm 0.60ve üstü reaksiyonlar için npm yerine iplik kullanın ve bağlantı yapmayın .
Fatih Mert Doğancan

4

Aşağıdaki gibi deneyebilirsiniz, böylece projeniz ile bağlantı bağımlılığını özlüyorum düşünüyorum:

React Native 0.6 veya üstü ile:

İOS'ta Cocoapod'ların yüklü olduğundan ve çalıştırıldığından emin olun :

cd ios
pod install
cd ..

React native 0.59 ve daha düşük sürümlerle:

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

Bunu zaten yaptım ama şansım yok.
Gautam Shrivastav

2

hepsini kopyala ve terminale yapıştır

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

benim için çalış


1

Aşağıdakileri çalıştırın:

expo install react-native-safe-area-context

expo doğru sürümü seçip yükleyecektir.


1

övmek npm kullanın i tepki-navigasyon-yığını t bu hatayı çözmek


1

Metro Bundler'ı doğrudan proje dizininden başlatmak benim için işe yarıyor. Birisi onlar için de işe yarayıp yaramadığını bana bildirebilir mi?

# Önbelleği temizle rm -rf $ TMPDIR / reakt- ; rm -rf $ TMPDIR / acele- ; rm -rf $ TMPDIR / metro- ; bekçi izle-del-all

* # Başlangıç ​​Metro Bundler doğrudan yerel tepki

* # Şimdi react-native run-androidveya react-native run-iosbaşka bir sekmede çalıştır

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.