如何在React Native Paper的Card.Actions中用flex实现元素两端对齐

问题根源 #

Card.Actions 组件默认未设置 flex: 1，导致它无法填满父容器的可用宽度——这直接让 justifyContent: 'space-between' 无法发挥作用。另外补充一点：React Native 里的 View 组件（Card.Actions 基于它实现）默认就是 flex 布局，不需要额外写 display: 'flex'。

修复代码 #

给 Card.Actions 添加 flex: 1 样式即可，修改后的代码如下：

<Card.Actions
    style={{
      flex: 1,
      justifyContent: 'space-between',
      flexDirection: 'row',
    }}>
    <Text>Lead booker:{'\n'}Benn King</Text>
    <AppButton label="View Booking" width="50%" size="small" />
</Card.Actions>

优化建议 #

如果自定义的 AppButton 设置了 50% 宽度导致布局拥挤，可以改成固定宽度（比如 width: 120），或者给文本套一层 View 并设置 flex: 1，保证文本有足够展示空间：

<Card.Actions
    style={{
      flex: 1,
      justifyContent: 'space-between',
      flexDirection: 'row',
      alignItems: 'center', // 让元素垂直居中，视觉更协调
    }}>
    <View style={{ flex: 1 }}>
        <Text>Lead booker:{'\n'}Benn King</Text>
    </View>
    <AppButton label="View Booking" width="120" size="small" />
</Card.Actions>

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