首页 > 代码库 > react native RadioButton（单选按钮）

react native RadioButton（单选按钮）

2024-08-27 03:30:30   218人阅读

刚刚写完这个多选按钮，我觉得没有单选的话，总会觉得有一点点不爽，因为在项目中我也没有用到单选，所以我没有好好研究源码，所以我在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=http://www.mamicode.com/{‘item1‘} >"color: #008080">33                         <Text>This is item #1</Text>
34                     </RadioButton>
35 
36                     <RadioButton value=http://www.mamicode.com/{‘item2‘}>"color: #008080">37                         <Text>This is item #2</Text>
38                     </RadioButton>
39 
40                     <RadioButton value=http://www.mamicode.com/{‘item3‘}>"color: #008080">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

 

react native RadioButton（单选按钮）






























        

            
                
                  
                
                

                    联系

                    我们