React Native：如何使用Flex布局实现两列单选按钮列表（替代固定像素高度）

我来帮你搞定这个Flex布局的问题！要实现不用固定高度、基于Flex维度的两列（每行5个）单选按钮布局，同时让container占父容器flexContainer的1/2大小，我们需要调整Flex的主轴/交叉轴配置，以及子元素的基准宽度。

修改后的完整代码 #

import { View, StyleSheet } from 'react-native';
// 假设你的Radio组件已经正确导入

export function RadioGrid({ label, options, onChange, value }: RadioGridProps) {
  return (
    <View style={styles.flexContainer}>
      <View style={styles.container}>
        {options.map((option) => (
          <Radio
            style={styles.radio}
            checked={option.value === value}
            key={option.value}
            label={option.label}
            onPress={() => onChange(option.value)}
          />
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  radio: {
    paddingVertical: 8,
    flexBasis: '20%', // 核心：每个单选按钮占容器宽度的20%，强制每行5个
    alignItems: 'flex-start', // 确保单选框和文字左对齐
  },
  container: {
    flexDirection: 'row', // 主轴为水平方向
    flexWrap: 'wrap', // 超出宽度自动换行
    flexBasis: '50%', // 占父容器flexContainer的1/2高度
    flexGrow: 0, // 禁止容器自动拉伸超出50%高度
  },
  flexContainer: {
    flex: 1, // 占满父组件的可用空间
  },
});

关键调整说明 #

• 让单选按钮每行5个：
  给每个Radio设置flexBasis: '20%'，这意味着每个元素会占据容器宽度的1/5（100% ÷ 5 = 20%）。当水平方向排满5个元素后，flexWrap: 'wrap'会自动将后续元素换行到下一行，完美实现两列布局，完全不需要固定容器高度。

• 让container占flexContainer的1/2大小：
  用flexBasis: '50%'直接定义container的高度为父容器flexContainer的一半（因为flexContainer是垂直方向的Flex容器，交叉轴为高度）；搭配flexGrow: 0，避免容器因为子元素内容过多而自动拉伸超出50%的高度限制。

• 细节优化：
  去掉了radio样式中的marginRight: 40，因为flexBasis已经分配了固定宽度，额外的margin会导致元素溢出换行异常。如果需要间距，可以用paddingHorizontal代替，或者调整flexBasis的百分比（比如18%，剩下的2%作为间距）。

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