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>
);
}
}
我创建了一个登录屏幕,当我单击按钮时,它会进入我的卡路里屏幕,它将我带到屏幕,但出现此错误
确保您在应用程序顶部渲染
<SafeAreaProvider>
。像这样的东西。
import { SafeAreaProvider } from 'react-native-safe-area-context';
...
return <SafeAreaProvider>...</SafeAreaProvider>;
...
将SafeAreaProvide中的所有组件包裹在app.js中
import { SafeAreaProvider } from 'react-native-safe-area-context';
... 返回...;
当您使用react-native-elements时,请确保安装版本2.2.1
就我而言,这是因为最近发布的 expo-router 版本与其他组件不兼容:
npx npm-check-updates -u
npm start --clean-cache
使用 SafeAreaProvider 包装 NavigationContainer。
import {SafeAreaProvider} from 'react-native-safe-area-context';
export default function App() {
return (
<SafeAreaProvider>
<NavigationContainer>{/*(...) */}</NavigationContainer>
</SafeAreaProvider>
);
}