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

问题描述 投票:0回答:5
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>
    );
  }
}

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

reactjs react-native expo
5个回答
11
投票

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

<SafeAreaProvider>
。像这样的东西。

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

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

4
投票

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

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

... 返回...;


0
投票

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


0
投票

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

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

0
投票

使用 SafeAreaProvider 包装 NavigationContainer。

import {SafeAreaProvider} from 'react-native-safe-area-context';
export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>{/*(...) */}</NavigationContainer>
    </SafeAreaProvider>
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.