react native RadioButton(单选按钮)

react native RadioButton(单选按钮)

刚刚写完这个多选按钮,我觉得没有单选的话,总会觉得有一点点不爽,因为在项目中我也没有用到单选,所以我没有好好研究源码,所以我在Github上找了一下,发现有一个挺好的,简单,不花哨。

在Github上搜索这个

react-native-flexi-radio-button

下载好以后,就可以直接用了。

 1 import React, { Component } from 'react';
 2 import {
 3   StyleSheet,
 4   Text,
 5   View
 6 } from 'react-native';
 7 
 8 import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'
 9 
10 class App extends Component{
11 
12     constructor(){
13         super()
14         this.state = {
15             text: ''
16         }
17         this.onSelect = this.onSelect.bind(this)
18     }
19 
20     onSelect(index, value){
21         this.setState({
22         text: `Selected index: ${index} , value: ${value}`
23         })
24     }
25 
26     render(){
27         return(
28             <View style={styles.container}>
29                 <RadioGroup
30                     onSelect = {(index, value) => this.onSelect(index, value)}
31                 >
32                     <RadioButton value={'item1'} >
33                         <Text>This is item #1</Text>
34                     </RadioButton>
35 
36                     <RadioButton value={'item2'}>
37                         <Text>This is item #2</Text>
38                     </RadioButton>
39 
40                     <RadioButton value={'item3'}>
41                         <Text>This is item #3</Text>
42                     </RadioButton>
43 
44                 </RadioGroup>
45                 
46                 <Text style={styles.text}>{this.state.text}</Text>
47             </View>
48         )
49     }
50 }
51 
52 let styles = StyleSheet.create({
53     container: {
54         marginTop: 40,
55         padding: 20
56     },
57     text: {
58         padding: 10,
59         fontSize: 14,
60     },
61 })
62 
63 module.exports = App

 

 
  
posted @ 2016-12-14 17:31 家磷 阅读( ...) 评论( ...) 编辑 收藏
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值