如何让react-native-radio-buttons-group标签位于单选按钮下方并居中？

要实现单选按钮标签在图标下方居中的效果，不需要修改全局样式，直接通过RadioButton组件自带的样式属性覆盖默认布局即可，具体操作如下：

1. 调整单选按钮容器布局
   默认每个单选按钮项的容器是flex: row布局，给RadioButton的containerStyle设置flexDirection: 'column'，同时添加alignItems: 'center'让图标和标签整体居中对齐。

2. 修正标签的边距与对齐方式
   默认标签带有左外边距，通过labelStyle将marginLeft设为0，再添加textAlign: 'center'让标签文本自身居中。

完整代码示例 #

import React, { useState } from 'react';
import { View } from 'react-native';
import { RadioGroup, RadioButton } from 'react-native-radio-buttons-group';

const RadioButtonDemo = () => {
  // 抽离公共样式，避免重复编写
  const buttonContainerStyle = {
    flexDirection: 'column',
    alignItems: 'center',
  };

  const labelStyle = {
    marginLeft: 0,
    textAlign: 'center',
  };

  const [radioButtons, setRadioButtons] = useState([
    {
      id: 'opt1',
      label: '选项A',
      value: 'a',
      containerStyle: buttonContainerStyle,
      labelStyle: labelStyle,
    },
    {
      id: 'opt2',
      label: '选项B',
      value: 'b',
      containerStyle: buttonContainerStyle,
      labelStyle: labelStyle,
    },
    {
      id: 'opt3',
      label: '选项C（长文本测试）',
      value: 'c',
      containerStyle: buttonContainerStyle,
      labelStyle: labelStyle,
    },
  ]);

  const handleRadioPress = (updatedButtons) => setRadioButtons(updatedButtons);

  return (
    <View style={{ paddingHorizontal: 20, paddingTop: 30 }}>
      <RadioGroup
        radioButtons={radioButtons}
        onPress={handleRadioPress}
      />
    </View>
  );
};

export default RadioButtonDemo;

原理说明 #

react-native-radio-buttons-group的每个RadioButton组件内部默认用flex: row布局排列图标和标签，组件暴露的containerStyle和labelStyle属性可以直接覆盖默认样式规则，实现你手动修改布局的相同效果，同时保证代码的可维护性。

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