无法导入反应原生的 SafeAreaProvider

Posted 2023-03-14

【中文标题】无法导入反应原生的 SafeAreaProvider

【英文标题】：not able to Import SafeAreaProvider of react native

【发布时间】：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>
  );

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

问候， 阿什什

【参考方案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。 然后就可以正常工作了。