Select 单选组件

渲染出一个单选按钮

特殊说明

该组件为受控组件，选中完全取决于props中的selectIndex

安装

npm install @qnpm/q-components --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import { Select } from "@qnpm/q-components";

const renderBaseSelect = (props) => {
  const [
    selectedIndex,
    setSelectedIndex
  ] = useState(props.selectedIndex);
  return (
    <React.Fragment>
      <Select
        {...props}
        type="base"
        selectedIndex={selectedIndex}
        selectItem={
          (value, index) => {
            setSelectedIndex(index);
          }
        }
      />
    </React.Fragment>
  );
};

  <View style={styles.container}>
    <Text>基础</Text>
    {
      renderBaseSelect({
        dataSource: [
          '选项1',
          '选项2'
        ]
      })
    }
    <Text>默认选中</Text>
    {
      renderBaseSelect({
        dataSource: [
          '选项1',
          '选项2',
          '默认选中'
        ],
        selectedIndex: 3
      })
    }
    <Text>不可选</Text>
    {
      renderBaseSelect({
        dataSource: [
          '选项1',
          '选项2'
        ],
        disableIndexs: [1]
      })
    }
    <Text>type:line</Text>
    {
      renderBaseSelect({
        dataSource: [
          '选项1',
          '选项2',
          '选项3'
        ],
        labelType: 'line'
      })
    }
  </View>

显示代码

import { Select } from "@qnpm/q-components";

const renderLabelSelect = (props) => {
  const [
    selectedIndex,
    setSelectedIndex
  ] = useState(props.selectedIndex);
  return (
    <React.Fragment>
      <Select
        {...props}
        type="label"
        selectedIndex={selectedIndex}
        selectItem={
          (value, index) => {
            setSelectedIndex(index);
          }
        }
      />
    </React.Fragment>
  );
};

  <View style={styles.container}>
    <Text>基础</Text>
    {
      renderLabelSelect({
        dataSource: [
          '选项1',
          '选项2'
        ]
      })
    }
    <Text>默认选中</Text>
    {
      renderLabelSelect({
        dataSource: [
          '选项1',
          '选项2',
          '默认选中'
        ],
        selectedIndex: 3
      })
    }
    <Text>不可选</Text>
    {
      renderLabelSelect({
        dataSource: [
          '选项1',
          '选项2'
        ],
        disableIndexs: [1]
      })
    }
    <Text>type:line</Text>
    {
      renderLabelSelect({
        dataSource: [
          '选项1',
          '选项2',
          '选项3'
        ],
        labelType: 'line'
      })
    }
    <Text>type:lableRadius</Text>
    {
      renderLabelSelect({
        dataSource: [
          '选项1',
          '选项2',
          '选项3'
        ],
        lableRadius: '20'
      })
    }
    <Text>type:numberOfLists</Text>
    {
      renderLabelSelect({
        dataSource: [
          '选项1',
          '选项2',
          '选项3'
        ],
        numberOfLists: 3
      })
    }
  </View>

属性说明

属性名 类型 默认值 是否必须 说明
accessibilityPreName string null false 无障碍标签前缀
customStyle ViewStyle 宽度100% false 组件样式，仅可用于设置margin和width
dataSource array [] false 数据源，数组中的每个元素都是字符串类型
disableIndexs array [] false 不可选选项
fontSize string or number 16 false 字号
iconSize string or number 16 false 图标字号
itemHeight string or number 50 false 单个item的高度
lableRadius string or number 8 false 标签圆角弧度，只有type为label时有效
labelType side|line side false label选项是否带边框
needScale boolean false false 是否支持缩放
numberOfLists number 2 false 用于指定标签样式时候，共有多少列标签，只有type为label时有效
renderItem (index: number, selected: boolean) => JSX.Element null false 自定义item view
renderLeftNode (index: number) => JSX.Element null false 基础类型左侧组件
selectedIndex number 0 false 指定某个选中的item，从0开始
selectItem (index: number) => {} 无 false 选中某个item的回调
type base|label base false 指定单选Picker的类型，默认base类型（列表样式，每个item之间有分割线
ScrollPicker
Shadow