React Native：page为profile时隐藏容器，保留settings-sharp图标

要在page为profile时隐藏container容器的视图（背景、内边距等视觉元素）但保留设置图标，你可以通过以下两种方式实现：

方案一：动态调整容器样式 #

通过判断page的值，给容器添加条件样式，在profile页面时移除容器的背景色、内边距，只保留定位属性确保图标正常显示：

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Instagram_Logo.png';
import { icons1, logo2 } from '../CommonCss/PageCss';
import { Ionicons } from '@expo/vector-icons';

const TopNavbar = ({ navigation, page }) => {
    // 根据page动态生成容器样式
    const containerStyle = page === 'profile' 
        ? { ...styles.container, backgroundColor: 'transparent', paddingVertical: 0, justifyContent: 'flex-end' }
        : styles.container;

    return (
        <View style={containerStyle}>
            {page === 'home' && <Image source={logo} style={logo2} />}
            {page === 'home' && (
                <Ionicons 
                    name="ios-chatbubbles-sharp"
                    size={24}
                    color="black"
                    style={icons1}
                    onPress={() => navigation.navigate('Chats')}
                />
            )}
            {page === 'profile' && (
                <Ionicons 
                    name="settings-sharp"
                    size={30}
                    color="white"
                    style={styles.icons11}
                    onPress={() => navigation.navigate('settings')}
                />
            )}
        </View>
    )
}

export default TopNavbar

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        paddingVertical: 10,
        position: 'absolute',
        top: 0,
        zIndex: 100,
        backgroundColor: '#111111',
    },
    icons11: {
        marginRight: '3%'
    }
})

方案二：拆分图标与容器结构 #

将设置图标单独抽离，当page为profile时不渲染原容器，仅渲染独立定位的图标，彻底隐藏容器的同时保持图标位置不变：

import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import logo from '../../assets/Instagram_Logo.png';
import { icons1, logo2 } from '../CommonCss/PageCss';
import { Ionicons } from '@expo/vector-icons';

const TopNavbar = ({ navigation, page }) => {
    return (
        <>
            {/* 非profile页面渲染完整导航容器 */}
            {page !== 'profile' && (
                <View style={styles.container}>
                    {page === 'home' && <Image source={logo} style={logo2} />}
                    {page === 'home' && (
                        <Ionicons 
                            name="ios-chatbubbles-sharp"
                            size={24}
                            color="black"
                            style={icons1}
                            onPress={() => navigation.navigate('Chats')}
                        />
                    )}
                </View>
            )}
            {/* profile页面仅渲染设置图标 */}
            {page === 'profile' && (
                <Ionicons 
                    name="settings-sharp"
                    size={30}
                    color="white"
                    style={styles.profileSettingsIcon}
                    onPress={() => navigation.navigate('settings')}
                />
            )}
        </>
    )
}

export default TopNavbar

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        paddingVertical: 10,
        position: 'absolute',
        top: 0,
        zIndex: 100,
        backgroundColor: '#111111',
    },
    profileSettingsIcon: {
        position: 'absolute',
        top: 10,
        right: '3%',
        zIndex: 100,
    }
})

方案说明 #

• 方案一适合需要保留容器基础布局逻辑的场景，仅隐藏视觉层面的容器样式
• 方案二更彻底，完全不渲染原容器，仅保留图标，性能更优

内容的提问来源于stack exchange，提问作者user20785876