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

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

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

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

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

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 .

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

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ış

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

expo install react-native-safe-area-context

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

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

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