react native 多選按鈕

在作項目的時候有一個需求，是能夠選擇多個條件的，特意在Github上找了一些案例，發現沒有什麼合適的，因而本身根據這些案例，改裝一下，封裝了一個合適本身的。先看我封裝的代碼。

  1 import React, {Component} from 'react';
  2 import {
  3     StyleSheet,
  4     View,
  5     Image,
  6     Text,
  7     TouchableHighlight,
  8 } from 'react-native'
  9 
 10 
 11 export default class CheckBox extends Component {
 12     constructor(props) {
 13         super(props);
 14         this.state = {
 15             isChecked: this.props.isChecked,
 16         }
 17     }
 18 
 19     /**
 20      * propTypes是React內部提供的校驗器,若是經過props傳過的數據與之不匹配,則會拋出異常。
 21      *
 22      */
 23     static propTypes = {
 24         ...View.propTypes,
 25         leftText: React.PropTypes.string,
 26         leftTextView: React.PropTypes.element,
 27         rightText: React.PropTypes.string,
 28         leftTextStyle: Text.propTypes.style,
 29         rightTextView: React.PropTypes.element,
 30         rightTextStyle: Text.propTypes.style,
 31         checkedImage: React.PropTypes.element,
 32         unCheckedImage: React.PropTypes.element,
 33         onClick: React.PropTypes.func.isRequired,
 34         isChecked: React.PropTypes.bool
 35 
 36     }
 37 
 38 
 39     /**
 40      * 若是沒有經過props傳過來數據,則默認的是這樣
 41      * @type
 42      */
 43     static defaultProps = {
 44         isChecked: false,
 45         leftTextStyle: {},
 46         rightTextStyle: {}
 47     }
 48 
 49     /**
 50      * 左邊文字
 51      */
 52     _renderLeft() {
 53         if (this.props.leftTextView) {
 54             return this.props.leftTextView;
 55         }
 56 
 57         if (!this.props.leftText) {
 58             return null;
 59         }
 60         return (
 61             <Text style={[styles.leftText, this.props.leftTextStyle]}>{this.props.leftText}</Text>
 62         )
 63     }
 64 
 65 
 66     /**
 67      * 右邊的文字
 68      * @returns {*}
 69      * @private
 70      */
 71     _renderRight() {
 72         if (this.props.rightTextView) {
 73             return this.props.rightTextView;
 74         }
 75         if (!this.props.rightText) {
 76             return null;
 77         }
 78         return (
 79             <Text style={[styles.rightText, this.props.rightTextStyle]}>{this.props.rightText}</Text>
 80         )
 81     }
 82 
 83     /**
 84      * 選中和爲選中的圖片按鈕樣式
 85      * @returns {*}
 86      * @private
 87      */
 88     _renderImage() {
 89         if (this.state.isChecked) {
 90             return this.props.checkedImage ? this.props.checkedImage : this.genCheckedImage();
 91         } else {
 92             return this.props.unCheckedImage ? this.props.unCheckedImage : this.genCheckedImage();
 93         }
 94     }
 95 
 96     genCheckedImage() {
 97         var source = this.state.isChecked ? require('./img/ic_check_box.png') : require('./img/ic_check_box_outline_blank.png');
 98         return (
 99             <Image source={source}/>
100         )
101     }
102 
103 
104     onClick() {
105         this.setState({
106             isChecked: !this.state.isChecked
107         })
108         this.props.onClick();
109     }
110 
111     render() {
112         return (
113             <TouchableHighlight
114                 style={this.props.style}
115                 onPress={()=>this.onClick()}
116                 underlayColor='transparent'
117             >
118                 <View style={styles.container}>
119                     {this._renderLeft()}
120                     {this._renderImage()}
121                     {this._renderRight()}
122                 </View>
123             </TouchableHighlight>
124         )
125     }
126 }
127 
128 
129 
130 const styles = StyleSheet.create({
131     container: {
132         flexDirection: 'row',
133         alignItems: 'center'
134     },
135     leftText: {
136         flex: 1,
137     },
138     rightText: {
139         flex: 1,
140         marginLeft: 10
141     }
142 })

基本上這些須要的屬性都是經過props來傳遞過來的。

用法也比較簡單：

  1 import React, {Component} from 'react';
  2 import {
  3     StyleSheet,
  4     ScrollView,
  5     View,
  6 } from 'react-native'
  7 
  8 import keys from './keys.json'
  9 import Toast from 'react-native-easy-toast'
 10 
 11 export default class example extends Component {
 12     constructor(props) {
 13         super(props);
 14         this.state = {
 15             dataArray: []
 16         }
 17     }
 18 
 19     componentDidMount() {
 20         this.loadData();
 21     }
 22 
 23     loadData() {
 24         this.setState({
 25             dataArray: keys
 26         })
 27     }
 28 
 29     onClick(data) {
 30         data.checked = !data.checked;
 31         let msg=data.checked? 'you checked ':'you unchecked '
 32         this.toast.show(msg+data.name);
 33     }
 34 
 35     renderView() {
 36         if (!this.state.dataArray || this.state.dataArray.length === 0)return;
 37         var len = this.state.dataArray.length;
 38         var views = [];
 39         for (var i = 0, l = len - 2; i < l; i += 2) {
 40             views.push(
 41                 <View key={i}>
 42                     <View style={styles.item}>
 43                         {this.renderCheckBox(this.state.dataArray[i])}
 44                         {this.renderCheckBox(this.state.dataArray[i + 1])}
 45                     </View>
 46                     <View style={styles.line}/>
 47                 </View>
 48             )
 49         }
 50         views.push(
 51             <View key={len - 1}>
 52                 <View style={styles.item}>
 53                     {len % 2 === 0 ? this.renderCheckBox(this.state.dataArray[len - 2]) : null}
 54                     {this.renderCheckBox(this.state.dataArray[len - 1])}
 55                 </View>
 56             </View>
 57         )
 58         return views;
 59 
 60     }
 61 
 62     renderCheckBox(data) {
 63         var leftText = data.name;
 64         return (
 65             <CheckBox
 66                 style={{flex: 1, padding: 10}}
 67                 onClick={()=>this.onClick(data)}
 68                 isChecked={data.checked}
 69                 leftText={leftText}
 70             />);
 71     }
 72 
 73     render() {
 74         return (
 75             <View style={styles.container}>
 76                 <ScrollView>
 77                     {this.renderView()}
 78                 </ScrollView>
 79                 <Toast ref={e=>{this.toast=e}}/>
 80             </View>
 81         )
 82     }
 83 
 84 }
 85 
 86 const styles = StyleSheet.create({
 87     container: {
 88         flex: 1,
 89         backgroundColor: '#f3f2f2',
 90         marginTop:30
 91     },
 92     item: {
 93         flexDirection: 'row',
 94     },
 95     line: {
 96         flex: 1,
 97         height: 0.3,
 98         backgroundColor: 'darkgray',
 99     },
100 })