RadioBox 单选按钮组件

渲染出一个单选

特殊说明

该组件为受控组件，展示类型取决于props中的disable和selected。

安装

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

使用说明

显示代码

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

const renderBaseRadioBox = (props) => {
  const [selected, setSelected] = useState(props.selected);
  return (
    <View>
      <RadioBox
        {...props}
        selected={selected}
        onPress={(status) => setSelected(!status)}
      />
    </View>
  );
};

<View style={styles.container}>
    {renderBaseRadioBox({
      type: 'base',
      selected: true
    })}
    {renderBaseRadioBox({
      type: 'radio',
      selected: true
    })}
    {renderBaseRadioBox({
      type: 'radio',
      selected: false
    })}
    {renderBaseRadioBox({
      type: 'radio',
      disable: true
    })}
  </View>

显示代码

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

const renderBaseRadioBox = (props) => {
  const [selected, setSelected] = useState(props.selected);
  return (
    <View>
      <RadioBox
        {...props}
        selected={selected}
        onPress={(status) => setSelected(!status)}
      />
    </View>
  );
};

  <View style={styles.container}>
    {renderBaseRadioBox({
      type: 'base',
      selected: true
    })}
    <Space />
    {renderBaseRadioBox({
      type: 'base',
      selected: true,
      size: { width: 40, height: 40 }
    })}
    <Space />
    {renderBaseRadioBox({
      type: 'radio',
      selected: true
    })}
    <Space />
    {renderBaseRadioBox({
      type: 'radio',
      selected: true,
      size: { width: 40, height: 40 }
    })}
  </View>

显示代码

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

const renderBaseRadioBox = (props) => {
  const [selected, setSelected] = useState(props.selected);
  return (
    <View>
      <RadioBox
        {...props}
        selected={selected}
        onPress={(status) => setSelected(!status)}
      />
    </View>
  );
};

  <View style={styles.container}>
    {renderBaseRadioBox({
      type: 'base',
      selected: true,
      fontSize: 30,
      size: { width: 30, height: 30 }
    })}
    <Space />
    {renderBaseRadioBox({
      type: 'base',
      selected: true,
      customStyle: { marginLeft: 30, marginTop: 20 }
    })}
  </View>

属性说明

属性名 类型 默认值 是否必须 说明
accessibilityPreName string `` false 无障碍标签前缀
customStyle ViewStyle {} false 组件样式，只支持设置margin
disable bool false false 是否可点击
fontSize string or number 20 false 基础类型的选择状态iconfont字体大小
type base|radio base false 组件类型, base没有不可选状态
needScale boolean false false 是否支持缩放
onPress function null false 点击回调,特殊说明
selected bool false false 是否选中
size object false 单选框大小

onPress 说明

onPress 所携带的参数为当前组件组件状态

QToast
ResizeImage