React Navigation自定义headerTitle设置后组件溢出屏幕问题求助

问题原因 #

1. 自定义头部根容器设置了width: 100%，但react-navigation的headerTitle父容器本身自带左右边距，硬设100%宽度会导致整体容器超出屏幕可用宽度，右侧内容自然溢出
2. 存放购物篮图标的View未绑定已定义的basketContainer样式，缺少布局约束
3. 文本容器未配置flexShrink，空间不足时会挤压右侧图标区域

代码修改 #

1. 调整样式配置 #

container: {
    flex: 1, // 替换原有的width: "100%"，自动占满可用空间
    height: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
},
textContainer: {
    flexShrink: 1, // 新增：允许文本区域收缩，不挤压图标
    height: "100%",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center"
},
basketContainer: {
    flexShrink: 0, // 新增：保证图标区域不被压缩
    paddingLeft: 12, // 可选：给图标预留左侧间距
    height: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
}

2. 补全组件样式绑定 #

<View style={styles.container}>
    <View style={styles.textContainer}>
        <Text style={styles.description}>Welcome to</Text>
        <Text style={styles.title}>Testing</Text>
    </View>
    {/* 给图标容器补上basketContainer样式 */}
    <View style={styles.basketContainer}>
        <Icon name="basket" color={globalStyles.colors.PRIMARY} size={24} />
    </View>
</View>

3. 可选：调整header全局配置 #

如果修改后仍有边距错位问题，可以在路由配置中调整headerTitle容器的默认样式：

<Stack.Screen
    name="你的页面名"
    component={你的页面组件}
    options={{
        headerTitle: () => <CustomHeader />,
        headerTitleContainerStyle: {
            marginHorizontal: 0, // 清除默认左右边距
            width: '100%'
        }
    }}
/>

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