React Native 自定义radio 单选or多选
2020-07-19 04:19
239 查看
前段时间一直在做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
相关文章推荐
- React Native 自定义radio 单选or多选
- React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)
- React-Native自定义单选radio
- ReactNative 自定义封装Radio单选组件
- react-native 自定义 TabBar
- React Native 下拉刷新添加自定义动画
- React Native之TextInput自定义
- React-Native系列Android——自定义View组件开发
- React-Native 使用自定义IconFont
- react native自定义实现下拉刷新上拉加载
- react-native-page-listview使用方法(自定义FlatList/ListView下拉刷新,上拉加载更多,方便的实现分页)
- React-Native 之 GD (二)自定义共用导航栏样式
- ReactNative中设置自定义样式类
- React-Native配置自定义字体文件
- React Native 之自定义下拉刷新
- React Native 自定义组件报错 has no propType for native prop
- React-Native 中自定义checkbox组件
- React-native 自定义模块
- 【Android】React-Native为Fresco的初始化提供自定义的Configuration