没有可用的安全区域插入值。确保您在应用程序的顶部呈现“<SafeAreaProvider>”。 - 我该如何解决这个错误？

Question

export default class CalorieScreen extends Component {
  constructor() {
    super();
    this.state = { text: "" };
  }
  render() {
    const { calories } = this.state;
    return (
      <View style={styles.container}>
        <Header
          backgroundColor={"#9c8210"}
          centerComponent={{
            text: "Monkey Chunky",
            style: { padding: 100, color: "#fff", fontSize: 20 },
          }}
        />
      </View>
    );
  }
}

我创建了一个登录屏幕，当我单击按钮时，它会进入我的卡路里屏幕，它将我带到屏幕，但出现此错误

Answer 1

确保您在应用程序顶部渲染

<SafeAreaProvider>

。像这样的东西。

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

...
  return <SafeAreaProvider>...</SafeAreaProvider>;
...

Answer 2

将SafeAreaProvide中的所有组件包裹在app.js中

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

... 返回...；

Answer 3

当您使用react-native-elements时，请确保安装版本2.2.1

Answer 4

就我而言，这是因为最近发布的 expo-router 版本与其他组件不兼容：

npx npm-check-updates -u
npm start --clean-cache

Answer 5

使用 SafeAreaProvider 包装 NavigationContainer。

import {SafeAreaProvider} from 'react-native-safe-area-context';
export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>{/*(...) */}</NavigationContainer>
    </SafeAreaProvider>
  );
}