ios 如何在 React Native 中实现单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31889921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement radio button in React Native
提问by vasavi
I am converting React code to React Native. So I need to implement radio buttons.
我正在将 React 代码转换为 React Native。所以我需要实现单选按钮。
回答by Lane Rettig
You can mimic a radio button really easily using just barebones RN. Here's one simple implementation which I use. Tweak size, colors etc. as you like. It looks like this (with a different tint, and some text). Add TouchableOpacityon top to turn it into a button that does something.
您可以使用准系统 RN 非常轻松地模拟单选按钮。这是我使用的一个简单实现。根据需要调整大小、颜色等。它看起来像这样（具有不同的色调和一些文字）。添加TouchableOpacity在顶部以将其变成可以执行某些操作的按钮。
function RadioButton(props) {
return (
<View style={[{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}, props.style]}>
{
props.selected ?
<View style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}}/>
: null
}
</View>
);
}
回答by Bahu
This is another way of creating radioButtons (Source, thanks to php step by step channel)
这是创建单选按钮的另一种方式（来源，感谢 php step by step 频道）
Method 1
方法一
constructor(props) {
super(props);
this.state = {
radioBtnsData: ['Item1', 'Item2', 'Item3'],
checked: 0
}
}
import { View, TextInput, TouchableOpacity } from 'react-native';
{this.state.radioBtnsData.map((data, key) => {
return (
<View key={key}>
{this.state.checked == key ?
<TouchableOpacity style={styles.btn}>
<Image style={styles.img} source={require("./img/rb_selected.png")}/>
<Text>{data}</Text>
</TouchableOpacity>
:
<TouchableOpacity onPress={()=>{this.setState({checked: key})}} style={styles.btn}>
<Image style={styles.img} source={require("./img/rb_unselected.png")} />
<Text>{data}</Text>
</TouchableOpacity>
}
</View>
)
})}
const styles = StyleSheet.create({
img:{
height:20,
width: 20
},
btn:{
flexDirection: 'row'
}
});
Place below images in img folder
将下面的图像放在img文件夹中
Method 2
方法二
Elaborated LaneRettig ex for new developers
为新开发人员精心设计的 LaneRettig ex
Thanks to Lane Rettig
感谢 Lane Rettig
constructor(props){
super(props);
this.state = {
radioSelected: 1
}
}
radioClick(id) {
this.setState({
radioSelected: id
})
}
render() {
const products = [{
id: 1
},
{
id: 2
},
{
id: 3
}];
return (
products.map((val) => {
return (
<TouchableOpacity key={val.id} onPress={this.radioClick.bind(this, val.id)}>
<View style={{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}}>
{
val.id == this.state.radioSelected ?
<View style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}} />
: null
}
</View>
</TouchableOpacity>
)
})
);
}
回答by Andy
There is a react-native component called react-native-radio-buttonsthat may do some of what you need:
有一个叫做react-native-radio-buttons的 react-native 组件可以做一些你需要的事情：
回答by Tishan Madhawa
I use Checkboxin react-nativefor creating the radio button. Please refer below code.
我使用Checkbox的react-native用于创建单选按钮。请参考以下代码。
constructor(props){
super(props);
this.state = {radioButton:'value1'};
}
render(){
return(
<View>
<CheckBox
title='value1'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value1'}
onPress={() => this.setState({radioButton: 'value1'})}
></CheckBox>
<CheckBox
title='value2'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value2'}
onPress={() => this.setState({radioButton: 'value2'})}
></CheckBox>
<CheckBox
title='value3'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value3'}
onPress={() => this.setState({radioButton: 'value3'})}
></CheckBox>
<CheckBox
title='value4'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value4'}
onPress={() => this.setState({radioButton: 'value4'})}
></CheckBox>
<CheckBox
title='value5'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value5'}
onPress={() => this.setState({radioButton: 'value5'})}
></CheckBox>
</View>
);
}
回答by squidLiquid
Maybe you could style into a circle button such as a radio button or something:
也许您可以将样式设置为圆形按钮，例如单选按钮或其他东西：
const period = [
{
key: 1,
name : '1 Month',
value : 1,
},
{
key : 2,
name : '12 Month',
value : 12,
}
];
constructor(props) {
super(props);
this.state = {
value: 0,
};
}
onChangeTabs = (tabs) => {
this.setState({
value : tabs,
})
}
renderTabs = () => {
return period.map(item => (
<TouchableWithoutFeedback
key={item.key}
value={item.value}
onPress={this.onChangeTabs.bind(this, item.value)}
>
<View style={this.state.value == item.value ? styles.periodActive : styles.period}>
<Text style={styles.periodText}>{item.name}</Text>
</View>
</TouchableWithoutFeedback>
));
};
const styles = StyleSheet.create({
period: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1,
marginHorizontal: 5,
},
periodActive: {
backgroundColor: '#333',
},
});
回答by Olusola Omosola
You can use react-native-radio-input. Its very simple to use.
您可以使用 react-native-radio-input。它的使用非常简单。
import RadioGroup,{Radio} from "react-native-radio-input";
.
.
.
//Receive the checked value (ES6 syntax)
getChecked = (value) => {
// value = our checked value
alert(value)
}
<RadioGroup getChecked={this.getChecked}>
<Radio iconName={"lens"} label={"The first option"} value={"A"} />
<Radio iconName={"lens"} label={"The first option"} value={"B"} />
<Radio iconName={"lens"} label={"I need numbers"} value={1} />
<Radio label={"Is IconName Optional?"} value={"Yes"} />
<Radio label={"Show Sentence Value"} value={"This is a Sentence"} />
</RadioGroup>
.
.
