时间戳

首页 > 解决方案 > 不起作用（视图位于通知选项卡上方）

react-native - 不起作用（视图位于通知选项卡上方）

问题描述

由于某种原因，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
    }
});

标签： react-native

解决方案

根据 react-native 文档：

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
    }
});

世博链接：expo-snack

希望能帮助到你。随时怀疑

推荐阅读