React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)
React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)
一,需求与简单介绍
在开发项目时发现RN没有给提供RadioButton和RadioGroup这两个组件,只有CheckBox组件(不支持iOS),但是项目中确实有有一些地方需要使用到RadioButton和RadioGroup,比如默认地址的选择等。
需求:
- 可以指定选中状态和未选中状态的颜色。
- 可以指定该单选按钮是否可选:disabled。
- 可以指定整体的样式,就像使用系统组件一样,这个用style来接收。
- 可以自定义宽(width)高(height)。
二,RadioButton(如需完整的代码,请留言评论)
在RN中控制一个View动态改变需要使用到state,这里定义一个state变量selected来记录RadioButton是否被选中,并且可以默认选中某一个,为true为选中状态,false为未选中状态:(如需完整的代码,请留言评论)
this.setState({
selectedIndex: nextProps.selectedIndex//从RadioGroup组件传入
})
state变量和动态控制一个组件的改变,但是组件改变之前仍然可能会显示一些东西,这些东西用props来控制,而且可以用这些props定义一些默认的属性,例如我们可以定义默认的颜色等:
RadioGroup.defaultProps = {
size: defaultSize,
thickness: defaultThickness,
color: defaultColor,
highlightColor: null,
}
在使用时我们可能会给这个RadioButton添加style属性,例如单选按钮的宽,高颜色等,以及选中的小圆点颜色,宽,高等等等,这个是在外面设置的,在内部我们同样会设置style属性
getRadioStyle(){
return {
height: this.context.size,
width: this.context.size,
borderRadius: this.context.size / 2,
borderWidth: this.context.thickness,
borderColor: this.props.isSelected && this.props.activeColor?this.props.activeColor:this.context.color,
}
} getRadioDotStyle(){
return {
height: this.context.size / 2,
width: this.context.size / 2,
borderRadius: this.context.size / 4,
backgroundColor: this.props.color || this.props.activeColor,
}
}
给最外层的View添加TouchableWithoutFeedback组件,添加点击事件以及是否可点击状态:
<View style={{opacity: this.props.disabled?0.4:1}}>
<TouchableWithoutFeedback
disabled={this.props.disabled}//是否可点击
onPress={() => this.context.onSelect(this.props.index, this.props.value)}//选中事件
>
{children}
</TouchableWithoutFeedback>
</View>
选中之后的样式选择:(如需完整的代码,请留言评论)
isSelected(){
if(this.props.isSelected)
return <View style={this.getRadioDotStyle()}/>
}
三,RadioGroup(如需完整的代码,请留言评论)
使用RadioButton大部分情况是多个共同使用,而且只能有一个被选中,android中就有这样的组件,但是在RN中没有找到,其实这个也很容易实现,原理是通过RadioGroup来生成多个RadioButton并且持有这些RadioButton的引用,当一个被选中的时候把其他的置为不选中(如需完整的代码,请留言评论)。
if(nextProps.selectedIndex != this.prevSelected){
this.prevSelected = nextProps.selectedIndex
this.setState({
selectedIndex: nextProps.selectedIndex
})
}
使用RadioGroup时给这个RadioButton传递多个即可,然后RadioGroup通过数组来创建RadioGroup,因为同样要指定RadioButton的样式,所以在外部使用时直接把style的各种样式和属性一并传递给RadioGroup,RadioGroup在创建RadioButton时把这些样式属性再传递给RadioButton(如需完整的代码,请留言评论):
<View style={this.props.style}>
{radioButtons}
</View>
RadioGroup.childContextTypes = {
onSelect: PropTypes.func.isRequired,
size: PropTypes.number.isRequired,
thickness: PropTypes.number.isRequired,
color: PropTypes.string.isRequired,
activeColor: PropTypes.string,
highlightColor: PropTypes.string,
}
获取选中事件的函数(如需完整的代码,请留言评论):
onSelect(index, value){
this.setState({
selectedIndex: index
})
if(this.props.onSelect)
this.props.onSelect(index, value)
}
四,使用实例(如需完整的代码,请留言评论)
已实现的样列(如需完整的代码,请留言评论):
组件代码实现:
<RadioGroup
style={{ backgroundColor: '#fff' }}
onSelect={(index, value) => this.onSelect(index, value)}
selectedIndex={this.state.selectedIndex}
>
{UsersAddress.map((model, i) => { return (
<RadioButton
key={i}
value={model}
selectedIndex={1}
style={{ backgroundColor: '#fff', marginBottom: 12, borderBottomColor: '#e4e4e4', borderBottomWidth: 12 }}>
<Text>张三</Text>
</RadioButton>
<RadioButton
key={i}
value={model}
selectedIndex={1}
style={{ backgroundColor: '#fff', marginBottom: 12, borderBottomColor: '#e4e4e4', borderBottomWidth: 12 }}>
<Text>李四</Text>
</RadioButton>
<RadioButton
key={i}
value={model}
selectedIndex={1}
style={{ backgroundColor: '#fff', marginBottom: 12, borderBottomColor: '#e4e4e4', borderBottomWidth: 12 }}>
<Text>王二</Text>
</RadioButton>
</RadioGroup>
onSelect(index, value) {
//alert(JSON.stringify(value))
//this.openAduice()
this.setState({
text: `Selected index: ${index} , value: ${value}`,
addressId: value.id
})
}
(如需完整的代码,请留言评论,留下联系方式)
React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)的更多相关文章
- React Native 组建之IOS和Android通用抽屉
/** * Sample React Native App * https://github.com/facebook/react-native * @flow *npm:https://www.np ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- React Native之通知栏消息提示(android)
React Native之通知栏消息提示(android) 一,需求分析与概述 1.1,推送作为手机应用的基本功能,是手机应用的重要部分,如果自己实现一套推送系统费时费力,所以大部分的应用都会选择使用 ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- React native 之设置IOS的图标,名称和启动图(下篇文章会讲到RN的android的相关设置)
1.首先,app的名称: 如图所示:我的工程名叫BOOk 在BOOk下面的info.plist的文件里设置app的相关信息:比如Bundle name就是设置APP的名称 2.App的图标:(这里注意 ...
- React Native热更新(iOS)-Pushy
React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...
- React Native项目集成iOS原生模块
今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...
随机推荐
- 【Git】Git pull 强制覆盖本地文件
git fetch --all git reset --hard origin/master git pull 备注: git fetch 只是下载远程的库的内容,不做任何的合并 git reset ...
- 部署tinyproxy代理服务
#安装依赖 yum install asciidoc #下载 wget https://github.com/tinyproxy/tinyproxy/releases/download/1.8.4/t ...
- n阶方阵的最值问题和对角线的和问题
如题! package 矩阵2; public class JuZheng { public static void main(String args[]) { int array[][] = { { ...
- 发现一种写法,类似callback&&callback()
与callback&&callback()异曲同工 return data && { title: `To-do (${data.length})`, componen ...
- DefaultNamespaceHandlerResolver中handlerMappings如何初始化
前言:最近一直在看Spring源码,今天在调试的时候发现一个小问题:在注册bean时,需要初始化spring默认命名空间处理器,具体在DefaultNamespaceHandlerResolver中实 ...
- 第二十六篇:USB3.0高带宽ISO(48KBytes/125us)实战
USB3.1技术已经推出, 10Gbps的速率足以满足数据, HD视频传输的要求. 要步入USB3.1的研发, 还得将USB3.0的基础打扎实. 微软提供的SUPER MUTT仅仅包括一个接口0, 其 ...
- 简单的C#TCP协议收发数据示例
参考:http://www.cnblogs.com/jzxx/p/5630516.html 一.原作者的这段话很好,先引用一下: Socket的Send方法,并非大家想象中的从一个端口发送消息到另一个 ...
- go标准库的学习-path/filepath
参考https://studygolang.com/pkgdoc 标准库path中有的该path/filepath库中都有,所以一般都使用path/filepath 导入方式: import &quo ...
- eclipse如何设置断点&断点处运行快捷键
第一步: 设置断点:在该行最前面边框双击 或快捷键:Ctrl+Shift+B 第二步: Debug 运行启动 第三部: 运行到断点后: 使用快捷键F5,F6,F7单步执行. F5:Step ...
- day92之支付宝支付
Python之支付宝支付 正式环境:用营业执照,申请商户号,appid 基于支付宝的测试环境:https://openhome.alipay.com/platform/appDaily.htm?tab ...