无法导入反应原生的 SafeAreaProvider答案

【问题标题】：not able to Import SafeAreaProvider of react native无法导入反应原生的 SafeAreaProvider
【发布时间】：2021-11-06 09:19:57
【问题描述】：

在https://www.youtube.com/watch?v=bvn_HYpix6s&t=4191s的帮助下，我正在关注项目开发

大约在 1:07:00，我们正在添加 react 原生导入。我们指的是https://reactnativeelements.com/docs。

我添加了 react-native-safe-area-context npm 包。并导入为

import { SafeAreaProvider } from 'react-native-safe-area-context';

但是这样做，我得到一个错误

Invariant Violation：试图注册两个同名的视图 RNCSafeAreaProvider 在 node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in 注册错误在 node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl 在 node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 中控制台.错误在 node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in 错误在 node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in 报告异常在 node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 在句柄异常中 node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in 处理错误在 node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 在 ErrorUtils.setGlobalHandler$argument_0 在 node_modules\regenerator-runtime\runtime.js:63:36 在 tryCatch 中 node_modules\regenerator-runtime\runtime.js:294:29 在调用 node_modules\regenerator-runtime\runtime.js:63:36 在 tryCatch 中 node_modules\regenerator-runtime\runtime.js:155:27 在调用 node_modules\regenerator-runtime\runtime.js:165:18 在 PromiseImpl.resolve.then$argument_0 在 node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 在 tryCallOne 中 node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 在 setImmediate$argument_0 中 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 在 _callTimer 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass

根据几个论坛的建议，我重新安装了软件包，但同样的错误。下面是我想运行的代码sn-p。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import HomeScreen from './screens/HomeScreen';
import {store} from './store'
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
  return (
    <Provider store={store}>
   <SafeAreaProvider >
      <HomeScreen/>
   
     </SafeAreaProvider >
    </Provider>
  );
}

下面是手机模拟器的截图。

问候，阿什什

【问题讨论】：

标签： react-native npm

【解决方案1】：

正如here 所说，在您的package.json 上的scripts 部分添加以下行：

"postinstall":"rm -rf node_modules/expo/node_modules/react-native-safe-area-context"

如果，您没有使用 expo：

"postinstall":"rm -rf node_modules/react-native-safe-area-context"

【讨论】：

【解决方案2】：

似乎 react-native-safe-area-context 是重复的。如果您安装了@react-native-community/masked-view，它还将安装 react-native-safe-area-context 作为依赖项。如果 2 版本不同，您会遇到这样的问题。请卸载 react-native-safe-area-context。然后就可以正常工作了。

【讨论】：