react native 多选按钮

在做项目的时候有一个需求，是可以选择多个条件的，特地在Github上找了一些案例，发现没有什么合适的，于是自己根据这些案例，改装一下，封装了一个合适自己的。先看我封装的代码。

 import React, {Component} from 'react';
 import {
     StyleSheet,
     View,
     Image,
     Text,
     TouchableHighlight,
 } from 'react-native'

 export default class CheckBox extends Component {
     constructor(props) {
         super(props);
         this.state = {
             isChecked: this.props.isChecked,
         }
     }

     /**
      * propTypes是React内部提供的校验器,如果通过props传过的数据与之不匹配,则会抛出异常。
      *
      */
     static propTypes = {
         ...View.propTypes,
         leftText: React.PropTypes.string,
         leftTextView: React.PropTypes.element,
         rightText: React.PropTypes.string,
         leftTextStyle: Text.propTypes.style,
         rightTextView: React.PropTypes.element,
         rightTextStyle: Text.propTypes.style,
         checkedImage: React.PropTypes.element,
         unCheckedImage: React.PropTypes.element,
         onClick: React.PropTypes.func.isRequired,
         isChecked: React.PropTypes.bool

     }

     /**
      * 如果没有通过props传过来数据,则默认的是这样
      * @type
      */
     static defaultProps = {
         isChecked: false,
         leftTextStyle: {},
         rightTextStyle: {}
     }

     /**
      * 左边文字
      */
     _renderLeft() {
         if (this.props.leftTextView) {
             return this.props.leftTextView;
         }

         if (!this.props.leftText) {
             return null;
         }
         return (
             <Text style={[styles.leftText, this.props.leftTextStyle]}>{this.props.leftText}</Text>
         )
     }

     /**
      * 右边的文字
      * @returns {*}
      * @private
      */
     _renderRight() {
         if (this.props.rightTextView) {
             return this.props.rightTextView;
         }
         if (!this.props.rightText) {
             return null;
         }
         return (
             <Text style={[styles.rightText, this.props.rightTextStyle]}>{this.props.rightText}</Text>
         )
     }

     /**
      * 选中和为选中的图片按钮样式
      * @returns {*}
      * @private
      */
     _renderImage() {
         if (this.state.isChecked) {
             return this.props.checkedImage ? this.props.checkedImage : this.genCheckedImage();
         } else {
             return this.props.unCheckedImage ? this.props.unCheckedImage : this.genCheckedImage();
         }
     }

     genCheckedImage() {
         var source = this.state.isChecked ? require('./img/ic_check_box.png') : require('./img/ic_check_box_outline_blank.png');
         return (
             <Image source={source}/>
         )
     }

     onClick() {
         this.setState({
             isChecked: !this.state.isChecked
         })
         this.props.onClick();
     }

     render() {
         return (
             <TouchableHighlight
                 style={this.props.style}
                 onPress={()=>this.onClick()}
                 underlayColor='transparent'
             >
                 <View style={styles.container}>
                     {this._renderLeft()}
                     {this._renderImage()}
                     {this._renderRight()}
                 </View>
             </TouchableHighlight>
         )
     }
 }

 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
         alignItems: 'center'
     },
     leftText: {
         flex: 1,
     },
     rightText: {
         flex: 1,
         marginLeft: 10
     }
 })

基本上这些需要的属性都是通过props来传递过来的。

用法也比较简单：

 import React, {Component} from 'react';
 import {
     StyleSheet,
     ScrollView,
     View,
 } from 'react-native'

 import keys from './keys.json'
 import Toast from 'react-native-easy-toast'

 export default class example extends Component {
     constructor(props) {
         super(props);
         this.state = {
             dataArray: []
         }
     }

     componentDidMount() {
         this.loadData();
     }

     loadData() {
         this.setState({
             dataArray: keys
         })
     }

     onClick(data) {
         data.checked = !data.checked;
         let msg=data.checked? 'you checked ':'you unchecked '
         this.toast.show(msg+data.name);
     }

     renderView() {
         if (!this.state.dataArray || this.state.dataArray.length === 0)return;
         var len = this.state.dataArray.length;
         var views = [];
         for (var i = 0, l = len - 2; i < l; i += 2) {
             views.push(
                 <View key={i}>
                     <View style={styles.item}>
                         {this.renderCheckBox(this.state.dataArray[i])}
                         {this.renderCheckBox(this.state.dataArray[i + 1])}
                     </View>
                     <View style={styles.line}/>
                 </View>
             )
         }
         views.push(
             <View key={len - 1}>
                 <View style={styles.item}>
                     {len % 2 === 0 ? this.renderCheckBox(this.state.dataArray[len - 2]) : null}
                     {this.renderCheckBox(this.state.dataArray[len - 1])}
                 </View>
             </View>
         )
         return views;

     }

     renderCheckBox(data) {
         var leftText = data.name;
         return (
             <CheckBox
                 style={{flex: 1, padding: 10}}
                 onClick={()=>this.onClick(data)}
                 isChecked={data.checked}
                 leftText={leftText}
             />);
     }

     render() {
         return (
             <View style={styles.container}>
                 <ScrollView>
                     {this.renderView()}
                 </ScrollView>
                 <Toast ref={e=>{this.toast=e}}/>
             </View>
         )
     }

 }

 const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#f3f2f2',
         marginTop:30
     },
     item: {
         flexDirection: 'row',
     },
     line: {
         flex: 1,
         height: 0.3,
         backgroundColor: 'darkgray',
     },
 })