Получение этой ошибки: ошибка: связывание не удалось: Ошибка: не удается разрешить модуль `act-native-safe-area-context`

Я получаю эту ошибку после запуска моего приложения:

ошибка: связывание не удалось: ошибка: не удалось разрешить модуль react-native-safe-area-contextиз node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: response-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. Пожалуйста, помогите мне исправить это.

Я думаю, что проблема заключается в том 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 - сохранить реакцию-навигацию

чтобы это работало нормально мне пришлось добавить:

Экспо-установка реагировать-родной-жест-обработчик реагировать-нативный-реанимированный

Тогда я получил

Невозможно разрешить «response-native-safe-area-context». Поэтому я добавил:

Экспо установка реагировать-навигация-стек

expo install response-native-safe-area-view реакции-нативный-безопасный-район-контекст

тогда я получил

сбой объединения: ошибка: невозможно разрешить модуль @react-native-community/masked-view

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

expo install @ response-native-community / masked-view, который может работать или нет :)

Поэтому с этого момента я использую следующие команды в начале всех моих реактивно-родных проектов, чтобы иметь возможность правильно использовать навигацию:

npm install - сохранить реакцию-навигацию

expo install ответ-родной-жест-обработчик реагировать-нативный-реанимированный стек реакции-навигации

expo install response-native-safe-area-view реакции-нативный-безопасный-район-контекст

expo install @ реагировать на нативное сообщество / маскированный вид

После запуска этих команд:

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

С React native 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, я реагирую на стек навигации, чтобы решить эту ошибку

Запуск Metro Bundler непосредственно из каталога проекта работает для меня. Может кто-нибудь дать мне знать, работает ли он и на них?

# Очистить кеш rm -rf $ TMPDIR / реагировать ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; сторож часы-дель-все

* # Запуск Metro Bundler напрямую реагирует на собственный запуск

* # Теперь запустите react-native run-androidили react-native run-iosв другой вкладке