在作项目的时候有一个需求，是能够选择多个条件的，特意在Github上找了一些案例，发现没有什么合适的，因而本身根据这些案例，改装一下，封装了一个合适本身的。先看我封装的代码。react
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来传递过来的。json
用法也比较简单：react-native
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 })