react native RadioButton（選項按鈕）

標籤：top   class   end   add   nat   blog   stat   item   ogr   

剛剛寫完這個多選按鈕，我覺得沒有單選的話，總會覺得有一點點不爽，因為在項目中我也沒有用到單選，所以我沒有好好研究源碼，所以我在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                 <RadioGroup30                     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: 2056     },57     text: {58         padding: 10,59         fontSize: 14,60     },61 })62 63 module.exports = App

 

react native RadioButton（選項按鈕）