一、描述

rax-checkbox 是内置的表单组件,文档地址如下:

支持的属性不在过多描述,支持用户自定义选中和未选中的图片 ICON,也支持设置图片的样式和选择框的样式。

二、源码

和之前说过的几个内置组件不同,checkbox 并没有区分 weex 容器环境和 web 容器环境的差异性,直接是渲染了同一套内容出来。

rax-checkbox 的本身的 ICON 是两个 base64 的图片常量,分别是 CHECKED_ICONUNCHECKED_ICON

为了配合点击,使用的是 rax-rouchable 组件,但是我觉得他有点冗余嵌套了,render 的源码如下:

 <Touchable role="checkbox" aria-checked={this.state.checked} onPress={this.onChange} style={styles.flexContainer}>
    <View style={[styles.container, containerStyle]}>
       <Image
            style={[styles.checkbox, checkboxStyle]}
            source={imageSource} />
   </View>
</Touchable>

按照我的想法,是不需要多一层 <View> 的,多次嵌套 weex 会有性能问题,好像是 15 层就会影响了。

不过这样能够更加的方便用户去自定义 containerStyle 的样式完成布局。

值得一提的是,刻意主动控制刷新问题,如果 props 相同,则不去重新渲染。

  componentWillReceiveProps(nextProps) {
    if (this.props.checked !== nextProps.checked) {
      this.setState({
        checked: Boolean(nextProps.checked)
      });
    }
  }

三、应用

使用的话,无非是传入 prop 即可,如果要使用自己的 ICON,可以通过 URL、或者是 const ICON = require('./xxx.png') 这几种方式,因为本质上,图标还是通过 <Image> 组件驱动的,选中状态变化后,切换不同的图片。

GIF.gif

应用的代码:

import {createElement, Component} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import CheckBox from 'rax-checkbox';
import styles from './App.css';

const UNCHECKED_ICON = require('./unchecked.png');
const CHECKED_ICON = require('./checked.png');



class App extends Component {
  state = {
    value:false
  }
  changeHandle = () => {
    this.setState({
      value:!this.state.value
    });
  }
  render() {
    return (
      <View style={styles.app}>
      <Text>{this.state.value}</Text>
        <CheckBox 
          checked={this.state.value}
          onChange={this.changeHandle}
        ></CheckBox>
        <CheckBox 
          checked={this.state.value}
          onChange={this.changeHandle}
          checkedImage={CHECKED_ICON}
          uncheckedImage={UNCHECKED_ICON}
        ></CheckBox>
      </View>
    );
  }
}

export default App;