在做项目的时候有一个需求，是可以选择多个条件的，特地在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',
},
})