React Native中justifyContent: 'center'失效及多设备布局适配问题

一、图片垂直居中失效的原因与修复 #

你给图片外层View加了justifyContent: 'center'但没效果，核心问题是这个外层View没有足够的高度空间——它的父View是flexDirection: 'row'，子View默认高度由内容（图片）决定，justifyContent垂直居中需要容器有明确高度才能生效。

修复方案：给图片外层View添加height: '100%'，让它占满父容器的高度，这样justifyContent: 'center'就能正常工作：

<View style={{justifyContent: 'center', height: '100%'}}>
  <Image
    style={{
      width: cardWidth,
      height: cardHeight,
      borderRadius: 12,
      marginLeft: spacing.m,
    }}
    resizeMode="cover" // 顺便修改避免图片拉伸变形
    source={item.image}
  />
</View>

二、多设备布局错乱的修复 #

你混用固定高度（cardHeight: 120）和百分比高度（height: '20%'），不同设备屏幕尺寸差异大，这种写法极易出现布局错位。修复要点：

1. 替换固定高度为相对单位：用屏幕高度比例代替固定数值，适配不同设备：

const cardHeight = sizes.height * 0.15; // 占屏幕高度15%，灵活适配

2. 外层容器用Flex分配空间：把外层View的height: '20%'改成flex: 1，让每个购物车项自动分配可用空间，避免百分比高度的适配问题：

<View style={{flex: 1, marginVertical: spacing.s}} key={index}> {/* 用marginVertical控制项间距 */}

3. 卡片容器用Flex撑满高度：给白色卡片View添加flex: 1，让它自动适应父容器高度：

<View
  style={{
    marginLeft: spacing.l,
    marginRight: spacing.l,
    backgroundColor: 'white',
    flex: 1, // 替换height: '90%'
    borderRadius: sizes.radius,
    justifyContent: 'center',
  }}>

4. 优化文本区域布局：给文本外层View加flex: 1，让它占满剩余空间，避免文本在小屏设备上被挤压：

<View style={{marginTop: spacing.m, marginLeft: spacing.l, flex: 1}}>

修改后的完整代码 #

import React from 'react';
import {Dimensions, Image, Text, View} from 'react-native';
import {colors, sizes, spacing} from '../../constants/config';
import Icon from '../../utils/Icon';

const cardWidth = sizes.width / 3;
const cardHeight = sizes.height * 0.15; // 改用相对高度
const CartItem = ({list}) => {
  return (
    <View style={{flex: 1}}>
      {list.map((item, index) => {
        return (
          <View style={{flex: 1, marginVertical: spacing.s}} key={index}>
            <View
              style={{
                marginLeft: spacing.l,
                marginRight: spacing.l,
                backgroundColor: 'white',
                flex: 1,
                borderRadius: sizes.radius,
                justifyContent: 'center',
              }}>
              <View style={{flexDirection: 'row', height: '100%'}}>
                <View style={{justifyContent: 'center', height: '100%'}}>
                  <Image
                    style={{
                      width: cardWidth,
                      height: cardHeight,
                      borderRadius: 12,
                      marginLeft: spacing.m,
                    }}
                    resizeMode="cover"
                    source={item.image}
                  />
                </View>
                <View style={{marginTop: spacing.m, marginLeft: spacing.l, flex: 1}}>
                  <Text style={{marginBottom: 8}}>{item.title}</Text>
                  <Text>{item.price}</Text>
                </View>
              </View>
            </View>
          </View>
        );
      })}
    </View>
  );
};

export default CartItem;

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