React Native 自定义radio 单选or多选

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

React Native 自定义radio 单选or多选的相关文章

React Native自定义导航栏

之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了, 效果如下: 我们需要创建一个 NaviBar.js 用来显示顶部的导航栏, 还需要四个界面(Page1.js,Page2.js,Page3.js,Page4.js). 当然还需要修改index.android.js或者index.ios.js 用来处理4个界面的切换. 导航栏NaviBar 实现

Android React Native自定义组件的流程

假设我们现在有这么一个需求,就是自定义一个组件,该组件由一个小图标和图标的文字说明组成,并且带有背景色,背景色可设置,宽度高度可设置.如下图所示正是两个这样的组件所组成. 首先,在index.android.js目录下新建一个js文件,命名为item.js,在里面输入模板代码 /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('

React Native 自定义ListView

"use strict" import React, { Component } from 'react';import { AppRegistry, // 注册组件,是应用的JS运行入口 StyleSheet, // 样式表, 类似于一个集合包含各个组件的属性 ListView, Dimensions, Text, TouchableOpacity, Image, View} from 'react-native'; const { width, height } = Dimensi

原创 Repeater radio 单选和多选混合

希望高手朋友给我留下美好的意见,在此先感谢您! 前台代码repeater: 1 <script src="../Scripts/jquery-1.9.1.js"></script> 2 <script type="text/javascript"> 3 4 function SelectOption(selopt) { 5 var tempopt = $("#selopts").val(); 6 if (tem

react native自定义Echarts

一. 导入第三方包 npm install native-echarts --save 二.导入Echarts组件 三.定义option 四.控件绑定option 下面是效果图           更多设置请参考官方网址 http://echarts.baidu.com/echarts2/doc/example.html

【REACT NATIVE 系列教程之十】真机运行报错COMMAND /BIN/SH FAILED WITH EXIT CODE 1 的解决方法

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2315.html Himi最近在真机运行遇到  Command /bin/sh failed with exit code 1  的错误, 模拟器运行没有任何问题.此问题已解决,这里分享下解决方案. 先来看下错误日志,如下图: 主要是划线的部分: 1.PhaseScriptExecution Bundle\ Reac

React Native之prop-types进行属性确认

React Native已经升级到0.51.0了,版本升级很快,但是对老项目也会有一些问题,常见的就是属性找不到的问题.例如: 主要原因是随着React Native的升级,系统废弃了很多的东西,过去我们可以直接使用 React.PropTypes 来进行属性确认,不过这个自 React v15.5 起就被移除了,转而使用prop-types库来进行替换 属性确认 属性确认的作用 使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用.但别人可能对这

React Native之属性类型检查机制详解 PropType 变成 prop-types

属性确认的作用 使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用.但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误. 因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性.这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性. React Native已经升级到0.51.0了,版本升级很快,但是对老

【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2219.html 在上一篇  [REACT NATIVE 系列教程之一]触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件.  那么紧接着我们利用Touchable来包装一个带图片的Button组件,且设计成可接受很多自定义参数. 一:创建我们自定义