React Native Elements 按钮组(ButtonGroup)组件详解

React Native Elements 按钮组(ButtonGroup)组件详解

react-native-elements Cross-Platform React Native UI Toolkit 项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements

什么是ButtonGroup组件

ButtonGroup是React Native Elements库中提供的一个按钮组组件，它可以将多个按钮以线性方式排列在一起，形成一个互斥的选择组。这个组件非常适合需要在一组相关但互斥的选项中进行选择的场景。

核心特性

1. 互斥选择：组内按钮只能选择一个，类似于单选按钮组
2. 灵活配置：支持纯文本按钮和自定义组件按钮
3. 样式可定制：可以通过props自定义容器和按钮样式
4. 状态管理：内置选中状态管理，使用简单

基本使用方法

文本按钮组实现

这是最简单的使用方式，只需要传入一个字符串数组作为按钮选项：

constructor() {
  super()
  this.state = {
    selectedIndex: 0 // 默认选中第一个按钮
  }
}

updateIndex = (selectedIndex) => {
  this.setState({selectedIndex})
}

render() {
  const buttons = ['选项一', '选项二', '选项三']
  const { selectedIndex } = this.state

  return (
    <ButtonGroup
      onPress={this.updateIndex}
      selectedIndex={selectedIndex}
      buttons={buttons}
      containerStyle={{height: 50}}
    />
  )
}

自定义组件按钮组实现

如果需要更复杂的按钮内容，可以使用自定义组件：

const CustomButton1 = () => (
  <View style={{flexDirection: 'row'}}>
    <Icon name="home" size={20} />
    <Text>首页</Text>
  </View>
)

const CustomButton2 = () => (
  <View style={{flexDirection: 'row'}}>
    <Icon name="user" size={20} />
    <Text>个人中心</Text>
  </View>
)

render() {
  const buttons = [
    { element: CustomButton1 }, 
    { element: CustomButton2 }
  ]
  
  return (
    <ButtonGroup
      onPress={this.updateIndex}
      selectedIndex={this.state.selectedIndex}
      buttons={buttons}
    />
  )
}

样式定制技巧

ButtonGroup提供了多种样式定制选项：

1. 容器样式：通过containerStyle定制整个按钮组的样式
2. 按钮样式：通过buttonStyle定制每个按钮的基础样式
3. 选中样式：通过selectedButtonStyle定制选中按钮的样式
4. 文本样式：通过textStyle定制按钮文本样式
5. 选中文本样式：通过selectedTextStyle定制选中按钮的文本样式

<ButtonGroup
  buttons={['白天模式', '夜间模式']}
  selectedIndex={this.state.selectedIndex}
  onPress={this.updateIndex}
  containerStyle={{
    marginTop: 20,
    borderRadius: 10,
    borderColor: '#4CAF50'
  }}
  buttonStyle={{
    backgroundColor: '#FFFFFF'
  }}
  selectedButtonStyle={{
    backgroundColor: '#4CAF50'
  }}
  textStyle={{
    color: '#000000',
    fontWeight: 'bold'
  }}
  selectedTextStyle={{
    color: '#FFFFFF'
  }}
/>

实际应用场景

1. 筛选器：商品分类筛选、时间范围选择等
2. 选项卡：简单的页面内容切换
3. 设置选项：如主题切换、显示模式选择等
4. 表单选项：性别选择、支付方式选择等

注意事项

1. 按钮组中的选项应该是互斥的，如果需要多选，应该使用CheckBox组件
2. 按钮数量不宜过多，一般建议不超过5个
3. 在Android平台上，按钮组可能会有默认的背景色，可以通过样式覆盖
4. 如果需要更复杂的选项卡功能，建议使用专门的Tab组件

通过合理使用ButtonGroup组件，可以快速构建出美观且功能完善的按钮选择界面，提升应用的用户体验。

react-native-elements Cross-Platform React Native UI Toolkit 项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements