ReactNative⾃定义radio单选or多选React Native ⾃定义radio 单选or多选
//⾃定义 radio
import React,{ PureComponent }from'react';
import PropTypes from'prop-types';
import{ View, Text, StyleSheet, TouchableOpacity, Image, Dimensions }from'react-native';
import uniq from'lodash/uniq';
import includes from'lodash/includes';
import difference from'lodash/difference';
const selected =require('../images/programme/radioSelect.png')
const unselected =require('../images/programme/radioUnSelect.png')
export default class CustomRadio extends PureComponent {
handleSelect=(option, index)=>{
const{ onSelect, type, value }=this.props
const valueAfterSelected =toggleValue(option, type, value)
onSelect &&onSelect(valueAfterSelected, index)
}
render(){
const{ options, value, type }=this.props;
return(
<View style={{ flexDirection:'row', flexWrap:'wrap'}}>
{
options.map((option, index)=>(
<View key={index} style={styles.main}>
<TouchableOpacity onPress={()=>this.handleSelect(option, index)}>
<Image
style={{
marginLeft:5,
marginRight:10,
width:15,
height:15,
}}
source={isSelected(option, type, value)? selected : unselected}
/>
</TouchableOpacity>
<Text style={}>{option.label}</Text>
</View>
))
}
</View>
);
}
}
function isSelected(option, type, value){
if(type ==='radio'){
return option.value === value
}else{
return(value ||[]).includes(option.value)
}
}
function toggleValue(option, type, value){
if(type ==='checkbox'){
return!includes(value, option.value)?uniq([...(value ||[]), option.value]):difference(value,[option.value])
reactnative原生列表return!includes(value, option.value)?uniq([...(value ||[]), option.value]):difference(value,[option.value]) }else{
return option.value
}
}
const{ width }= ('window');
const styles = ate({
main:{
flexDirection:'row',
marginTop:5,
marginBottom:5,
justifyContent:'flex-start',
alignItems:'center',
},
text:{
marginLeft:0,
fontSize:13,
color:'#333',
},
});
CustomRadio.propTypes ={
type: PropTypes.string,
options: PropTypes.array,
}
CustomRadio.defaultProps ={
type:'radio',
}
单选：
<CustomRadio
type="radio"
onSelect={this.customRadio.bind(this)}
options={[{ value:1, label:'报备'}]}
value={this.state.auditType}
/>
多选：
<CustomRadio
type="checkbox"
onSelect={this.customRadio.bind(this)}
options={[{ value:1, label:'报备'},{ value:2, label:'报批'}]}
value={this.state.productChannel}
/>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。