React Native Elements 报错: “RNCSafeAreaView” was not found in the UIManager

问题

今天在使用 React Native Elements 的 Header 组件的时候出现了这个报错。

“RNCSafeAreaView” was not found in the UIManager

解决方法

安装 react-native-safe-area-view。

yarn add react-native-safe-area-view react-native-safe-area-context

用 SafeAreaProvider 包装你的根目录。

import * as React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import MyAwesomeApp from './src/MyAwesomeApp';

export default function App() {
  return (
    <SafeAreaProvider>
      <MyAwesomeApp />
    </SafeAreaProvider>
  );
}

部分没有使用 Header 组件的界面可能还需要在外面嵌套一层，例如官方的这个例子:

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

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>
  );
}