前段时间一直在做react native开发,下面介绍下自定义自定义radio的封装。
1 import React, { PureComponent } from ‘react‘; 2 import PropTypes from ‘prop-types‘; 3 import { View, Text, StyleSheet, TouchableOpacity, Image, Dimensions } from ‘react-native‘; 4 import uniq from ‘lodash/uniq‘; 5 import includes from ‘lodash/includes‘; 6 import difference from ‘lodash/difference‘; 7 8 const selected = require(‘../images/programme/radioSelect.png‘) 9 const unselected = require(‘../images/programme/radioUnSelect.png‘) 10 11 export default class Radio extends PureComponent { 12 handleSelect = (option, index) => { 13 const { onSelect, type, value } = this.props 14 const valueAfterSelected = toggleValue(option, type, value) 15 16 onSelect && onSelect(valueAfterSelected, index) 17 } 18 19 render() { 20 const { options, value, type } = this.props; 21 22 return ( 23 <View style={{ flexDirection: ‘row‘, flexWrap: ‘wrap‘ }} > 24 { 25 options.map((option, index) => ( 26 <View key={index} style={styles.main}> 27 <TouchableOpacity onPress={() => this.handleSelect(option, index)}> 28 <Image 29 style={{ 30 marginLeft: 5, 31 marginRight: 10, 32 width: 15, 33 height: 15, 34 }} 35 source={isSelected(option, type, value) ? selected : unselected} 36 /> 37 </TouchableOpacity> 38 <Text style={styles.text}>{option.label}</Text> 39 </View> 40 )) 41 } 42 </View> 43 ); 44 } 45 } 46 47 function isSelected(option, type, value) { 48 if (type === ‘radio‘) { 49 return option.value === value 50 } else { 51 return (value || []).includes(option.value) 52 } 53 } 54 55 function toggleValue(option, type, value) { 56 if (type === ‘checkbox‘) { 57 return !includes(value, option.value) ? uniq([...(value || []), option.value]) : difference(value, [option.value]) 58 } else { 59 return option.value 60 } 61 } 62 63 const { width } = Dimensions.get(‘window‘); 64 const styles = StyleSheet.create({ 65 main: { 66 flexDirection: ‘row‘, 67 marginLeft: width == 320 ? 8 : 10, 68 marginRight: width == 320 ? 5 : 10, 69 marginTop: 5, 70 marginBottom: 5, 71 justifyContent: ‘flex-start‘, 72 alignItems: ‘center‘, 73 }, 74 75 text: { 76 marginLeft: 0, 77 fontSize: 13, 78 color: ‘#333‘, 79 }, 80 }); 81 82 MoreRadio.propTypes = { 83 type: PropTypes.string, 84 options: PropTypes.array, 85 } 86 87 MoreRadio.defaultProps = { 88 type: ‘radio‘, 89 }
1 单选 2 <CustomRadio 3 type="radio" 4 onSelect={this.customRadio.bind(this)} 5 options={[{ value: 1, label: ‘报备‘ }]} 6 value={this.state.auditType} 7 />
1 多选 2 <CustomRadio 3 type="checkbox" 4 onSelect={this.customRadio.bind(this)} 5 options={[{ value: 1, label: ‘报备‘ }, { value: 2, label: ‘审批‘ }]} 6 value={this.state.productChannel} 7 />
原文地址:https://www.cnblogs.com/woshidameinv/p/10314861.html
时间: 2024-10-08 22:51:29