Отримання помилки: помилка: помилка поєднання: помилка: неможливо вирішити модуль `реагувати-нативне-безпечне-область-контекст`

Я отримую цю помилку після запуску програми:

помилка: збірка не вдалася: помилка: неможливо вирішити модуль react-native-safe-area-contextіз node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: контексту react-native-safe-area не вдалося знайти в проекті.

Але те саме, що я зробив для свого старого демо. Це спрацювало чудово.

Я не знаю, що я тут роблю неправильно. Будь ласка, перевірте мій код:

Для встановлення:

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 install - зберегти реакцію-навігацію

щоб це нормально працювало, довелося додати:

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

Потім я отримав

Неможливо розв’язати "реагувати-нативно-безпечно-зону-контекст". Тому я додав:

expo install react-navigation-stack

expo install reakct-native-safe-area-view react-native-safe-area-context

тоді я отримав

помилка зв’язку: помилка: неможливо вирішити модуль @react-native-community/masked-view

Тому я шукав масковане уявлення (яке наразі не підтримується експопою, відповідно до його git документа). Тоді я дізнався, що я вживаю котів:

expo install @ react-native-community / masked-view, який може працювати чи ні :)

Тому відтепер я використовую наступні команди на початку всіх своїх власних проектів, що реагують, щоб мати можливість правильно користуватися навігацією:

npm install - зберегти реакцію-навігацію

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

expo install reakct-native-safe-area-view react-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.

Дякуємо Леноароду та Гаутаму Шріваставу за те, що вони вказали правильний напрямок.

Я думаю, що ви пропускаєте залежність зв’язку зі своїм проектом, щоб ви могли спробувати як нижче:

З React Native 0.6 або вище:

На iOS переконайтесь, що встановлено та запущено Cocoapods :

cd ios
pod install
cd ..

Спробуйте рідну 0,59 та нижчу спробу:

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

expo вибере правильну версію, а потім встановить її.

використовуйте похвалу npm я реагую-навігація-стек t вирішіть цю помилку

Запуск Metro Bundler безпосередньо з каталогу проектів працює для мене. Чи може хтось повідомити мене, чи працює він і для них?

# Чистий кеш rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / поспіх ; rm -rf $ TMPDIR / метро- ; сторож годинник-дель-все

* # Пуск Metro Bundler безпосередньо реагує на початковий старт

* # Тепер запустіть react-native run-androidабо react-native run-iosна іншій вкладці