React Native Flex布局下如何将卡片内图标垂直对齐到底部？

问题原因 #

你设置的flex-end未生效主要有两个核心问题：

1. 最外层红边框的父容器设置了alignItems: 'center'，这会导致所有子元素高度收缩到自身内容高度，你给右侧图标容器配置的height: '100%'无法生效，没有足够的高度空间支撑垂直对齐逻辑。
2. 右侧承载图标的容器没有配置对应的flex垂直对齐属性，即使高度足够也无法将图标推到底部。

调整步骤 #

• 把最外层View的alignItems: 'center'改为alignItems: 'stretch'，让所有子元素自动拉伸到和父容器等高，左侧文本区域如果需要垂直居中，单独给左侧flex: 1的View添加justifyContent: 'center'即可。
• 给右侧marginLeft: 10的View添加justifyContent: 'flex-end'属性，React Native的View默认flex方向为垂直（column），该属性会让内部的图标容器靠底部排列。

修改后核心代码 #

export default function App() {
  return (
    <View
      style={{
        borderWidth: 1,
        borderColor: 'red',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'stretch', 
        paddingVertical: 10,
        paddingHorizontal: 15,
      }}>
      <View style={{ flex: 1, justifyContent: 'center' }}> 
        <View style={{ flexDirection: 'row' }}>
          {/* 你的文本内容 */}
        </View>
      </View>
      <View
        style={{
          marginLeft: 10,
          justifyContent: 'flex-end',
        }}>
        <MyIcon color="gray" />
      </View>
    </View>
  );
}

function MyIcon({ color }) {
  return (
    <View
      style={{
        borderRadius: 15,
        width: 30,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'lightblue',
      }}>
      {/* 你的Svg图标代码 */}
    </View>
  );
}

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