react native RadioButton(单选按钮)

时间:2023-03-09 19:37:29
react native RadioButton(单选按钮)

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

在Github上搜索这个

react-native-flexi-radio-button

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

 import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native'; import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button' class App extends Component{ constructor(){
super()
this.state = {
text: ''
}
this.onSelect = this.onSelect.bind(this)
} onSelect(index, value){
this.setState({
text: `Selected index: ${index} , value: ${value}`
})
} render(){
return(
<View style={styles.container}>
<RadioGroup
onSelect = {(index, value) => this.onSelect(index, value)}
>
<RadioButton value={'item1'} >
<Text>This is item #1</Text>
</RadioButton> <RadioButton value={'item2'}>
<Text>This is item #2</Text>
</RadioButton> <RadioButton value={'item3'}>
<Text>This is item #3</Text>
</RadioButton> </RadioGroup> <Text style={styles.text}>{this.state.text}</Text>
</View>
)
}
} let styles = StyleSheet.create({
container: {
marginTop: 40,
padding: 20
},
text: {
padding: 10,
fontSize: 14,
},
}) module.exports = App