我正在学习 react native 中的应用程序开发，我的应用程序与手机的状态栏重叠。如果我在顶部添加填充，那么不同手机的填充会有所不同。我尝试使用 SafeAreaView，但它不起作用，我在某处读到它只适用于 iPhone。那么有什么方法可以在状态栏下呈现应用程序？任何建议将不胜感激。
应用与状态栏重叠
【问题讨论】：
标签： reactjs react-native
您需要找到状态栏高度并将容器的上边距设置为等于该数量。
由于 Expo 将此值作为常量提供，您可以使用它来设置父组件的样式，以便内容始终位于状态栏下方。
您可以从 github 问题 here 中遵循此模式
const App = StackNavigator({
Home: { screen: HomeScreen },
About: { screen: AboutScreen },
}, {
navigationOptions: { headerStyle: { marginTop: Expo.Constants.statusBarHeight } }
})
【讨论】：
我终于通过简单地将paddingTop:StatusBar.currentHeight 添加到我的组件的根视图标签来解决它。
【讨论】：
针对这个问题，我为我的屏幕创建了一个可重用的组件包装器，同时使用了SafeAreaView 和View。示例代码。
import React, { Component } from 'react';
import { View, SafeAreaView, Platform, StatusBar } from 'react-native';
const styles = {
container: { StatusBar.currentHeight }
};
/**
* Screen Wrapper to apply padding space on status bar
*/
export const Screen = React.memo((props) => {
if (Platform.OS === 'ios') {
return (
<SafeAreaView style={props.style}>
{props.children}
</SafeAreaView>
);
}
return (
<View style={[styles.container, props.style]}>
{props.children}
</View>
);
});
然后我只需在屏幕需要填充空间的地方使用它。简单而有效。
render() {
<Screen>
<Text>{'your screen content here'}</Text>
</Screen>
};
【讨论】：
你应该像这样使用StatusBar：
import { View, StatusBar } from 'react-native';
export const myComponent = () => {
return (
<View>
<StatusBar backgroundColor={colors.SECONDARY_COLOR} />
... // your code
</View>
)
}
它将设置状态栏背景颜色，并防止与您的状态栏重叠。 如果您不想设置背景颜色，您可以使用：
<StatusBar />
【讨论】：