<SafeAreaView>不工作(视图位于通知选项卡上方)
<SafeAreaView>不工作(视图位于通知选项卡上方)
提问于 2019-12-20 16:27:58
由于某些原因，safeAreaView在我的代码中不起作用，视图位于notification选项卡的上方。我尝试了一些事情，但做不到。我尝试采用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
}
});回答 4
Stack Overflow用户
回答已采纳
发布于 2019-12-21 05:34:19
根据react本地文档：
SafeAreaView的目的是在设备的安全区边界内呈现内容。它目前只适用于具有iOS版本11或更高版本的iOS设备。
我建议您不要仅仅遵循safeAreaView功能。相反，它更好地提取状态栏高度，并给整个容器一个marginTop，所以它总是在状态栏下面。请参阅下面的代码和实用的世博会小吃解决方案：
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
}
});世博会链接:世博小吃
希望能帮上忙。有疑问就放心吧
Stack Overflow用户
发布于 2022-01-18 20:17:11
SafeAreaView从'react-native-safe-area-context'刚刚为我工作。
Stack Overflow用户
发布于 2022-04-29 11:17:19
react-native版本不适用于Android或早期的iOS版本。
具体而言，您要使用：
import { SafeAreaView } from 'react-native-safe-area-context'而不是
import { SafeAreaView } from 'react-native'如果您还没有使用反应-本机-安全区域-上下文，那么您可能需要阅读文档，因为它还要求您在应用程序中更高级别地使用SafeAreaProvider组件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59428494
复制相关文章
相似问题
腾讯云开发者
