没有可用的安全区域插入值。确保您在应用程序的顶部渲染“<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

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