react-native - 无法导入反应原生的 SafeAreaProvider

Question

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

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

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

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

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

不变违规：尝试在 node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 在 node_modules\react-native\Libraries\LogBox\LogBox.js:59 的 registerError 中注册两个具有相同名称 RNCSafeAreaProvider 的视图： 8 in errorImpl at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 在 node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 在 node_modules\react-native\Libraries\Core\ 的 handleException 中setUpErrorHandling.js:24:6 in handleError at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0 at 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 in PromiseImpl.resolve.then$argument_0 在 node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 在 node_modules\react-的 tryCallOne 中调用native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer at node_modules\react-native\Libraries\ _callImmediatesPass 中的 Core\Timers\JSTimers.js:181:1427 在 node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0 在 node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 在 node_modules\ react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer at node_modules\react-native\ _callImmediatesPass 中的库\Core\Timers\JSTimers.js:181:1427 在 node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0 在 node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 在 node_modules\ react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer at node_modules\react-native\ _callImmediatesPass 中的库\Core\Timers\JSTimers.js:181:1414 in _callTimer 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 在 _callImmediatesPass14 in _callTimer 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 在 _callImmediatesPass

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

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

Answer 1

如此处所述scripts，在您的部件上添加以下行package.json：

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

如果，您没有使用博览会：

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