<SafeAreaView> 不起作用(视图位于通知选项卡上方)

Question

由于某种原因，safeAreaView在我的代码中不起作用，视图位于通知选项卡上方。我尝试了一些方法，但不能。我尝试采用 safeAreaView 的样式，并在 safeAreaView 下面创建一个涉及所有代码的视图，然后在该视图中放置该样式，但它也不起作用！

import React from 'react';
import { SafeAreaView, StyleSheet, View, Image, Text } from 'react-native';
export default function Menu({ navigation }){
return <SafeAreaView style={styles.container}>
<View style={styles.profile}>
<Image source={{uri: 'https://elysator.com/wp-content/uploads/blank-profile-picture-973460_1280-e1523978675847.png'}} style={styles.imageProfile} />
<Text style={styles.name}>StackOverFlow</Text>
</View>
</SafeAreaView>
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
profile: {
flexDirection: 'row',
backgroundColor: '#EEE',
},
imageProfile: {
width: 34,
marginBottom: 5,
marginTop: 5,
borderRadius: 44/2,
marginLeft: 10,
height: 34
},
name: {
alignSelf: 'center',
marginLeft: 10,
fontSize: 16
}
});

Answer 1

根据 react-native 文档：

安全

区域视图的目的是在安全区域内呈现内容 设备的边界。它目前仅适用于iOS设备 使用 iOS 版本 11 或更高版本。

我建议您不要只遵循安全区域视图功能。 相反，最好提取状态栏高度并为整个容器提供边距顶部，使其始终位于状态栏下方。请参阅下面的代码以及有效的博览会小吃解决方案：

import React from 'react';
import { SafeAreaView, StyleSheet, View, Image, Text,StatusBar } from 'react-native';
export default function Menu({ navigation }){
return <SafeAreaView style={styles.container}>
<View style={styles.profile}>
<Image source={{uri: 'https://elysator.com/wp-content/uploads/blank-profile-picture-973460_1280-e1523978675847.png'}} style={styles.imageProfile} />
<Text style={styles.name}>StackOverFlow</Text>
</View>
</SafeAreaView>
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:StatusBar.currentHeight
},
profile: {
flexDirection: 'row',
backgroundColor: '#EEE',
},
imageProfile: {
width: 34,
marginBottom: 5,
marginTop: 5,
borderRadius: 44/2,
marginLeft: 10,
height: 34
},
name: {
alignSelf: 'center',
marginLeft: 10,
fontSize: 16
}
});

展会链接：世博会小吃

Answer 2

react-native

版本不适用于Android或早期iOS版本。

具体来说，您要使用：

import { SafeAreaView } from 'react-native-safe-area-context'

而不是

import { SafeAreaView } from 'react-native'

如果您尚未使用 react-native-safe-area-context，那么您可能需要阅读文档，因为它还要求您在应用中更高级别使用SafeAreaProvider组件。

Answer 3

'react-native-safe-area-context'的SafeAreaView对我有用。

Answer 4

在图像视图中尝试"调整大小模式" 枚举("覆盖"、"包含"、"拉伸"、"重复"、"居中"(

https://facebook.github.io/react-native/docs/image#resizemode