React Native 自定义radio 单选or多选

Posted 2021-02-05 woshidameinv

前段时间一直在做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  />