我想将图像居中，但这似乎是合理的内容：'center'属性不像我想要的那样工作
我正在react-native中学习Flexbox
还有，我想问我的代码如何在不改变布局的情况下在许多不同的设备上运行，我在iphone14上编码，但当我切换到iPad或iphonese时，布局发生了变化，几乎不像预期的那样。
picture
我的代码

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 = 120;
const CartItem = ({list}) => {
  return (
    <View style={{flex: 1}}>
      {list.map((item, index) => {
        return (
          <View style={{height: '20%'}} key={index}>
            <View
              style={{
                marginLeft: spacing.l,
                marginRight: spacing.l,
                backgroundColor: 'white',
                height: '90%',
                borderRadius: sizes.radius,
              }}>
              <View style={{flexDirection: 'row'}}>
                <View style={{justifyContent: 'center'}}>
                  <Image
                    style={{
                      width: cardWidth,
                      height: cardHeight,
                      borderRadius: 12,
                      marginLeft: spacing.m,
                    }}
                    resizeMode="stretch"
                    source={item.image}
                  />
                </View>
                <View style={{marginTop: spacing.m, marginLeft: spacing.l}}>
                  <Text style={{marginBottom: 8}}>{item.title}</Text>
                  <Text>{item.price}</Text>
                </View>
              </View>
            </View>
          </View>
        );
      })}
    </View>
  );
};

export default CartItem;

this is my desired image