rax-checkbox

描述： CheckBox 是基础的选择框，选择框用图片实现，支持用户使用自己的图片进行替换

安装

$ npm install rax-checkbox --save

引用

import CheckBox from "rax-checkbox";

属性

注： 1、支持列表中的 代表 h5 代表 weex 代表小程序

属性	类型	默认值	必填	描述	支持
defaultChecked	boolean	false		默认选中状态
checked	boolean	-		选中状态
checkedImage	string			选中图片
uncheckedImage	string			非选中图片
containerStyle	CSSProperties	-		选择框容器样式
checkboxStyle	CSSProperties	-		选择框图片样式
onChange	(checked: boolean) => void	-		选择事件

基本示例

// demo
/** @jsx createElement */
"use strict";
import { createElement, render, useState } from "rax";
import DU from "driver-universal";
import Checkbox from "rax-checkbox";
import View from "rax-view";
import Text from "rax-text";

const App = () => {
  const [checked, setChecked] = useState(false);
  const [controlledCheckboxMsg, setControlledCheckboxMsg] = useState("");
  const [unControlledCheckboxMsg, setUncontrolledCheckboxMsg] = useState("");
  return (
    <View>
      <Text>Controlled: {controlledCheckboxMsg}</Text>
      <Checkbox
        checked={checked}
        onChange={hasChecked => {
          setControlledCheckboxMsg(`onChange => ${hasChecked}`);
        }}
      >
        {value => <Text>{value}</Text>}
      </Checkbox>
      <View
        style={{
          paddingLeft: 15,
          paddingRight: 15,
          backgroundColor: "#1890FF",
          width: 200,
          borderRadius: 15,
          alignItems: "center",
          justifyContent: "center"
        }}
        onClick={() => {
          setChecked(!checked);
        }}
      >
        <Text style={{ color: "#fff" }}>Click Me!</Text>
      </View>
      <Text>Uncontrolled: {unControlledCheckboxMsg}</Text>
      <Checkbox
        defaultChecked
        onChange={hasChecked => {
          setUncontrolledCheckboxMsg(`onChange => ${hasChecked}`);
        }}
      >
        {value => <Text>{value}</Text>}
      </Checkbox>
    </View>
  );
};

render(<App />, document.body, {
  driver: DU
});