项目中需要设计调查问卷,需要单选题,,需要动态生成多个单选框和单选按钮,我找到了这个组件
react-native-flexi-radio-button
https://github.com/thegamenicorus/react-native-flexi-radio-button
因为这个组件比较简洁,一个RadioGroup加上多个RadioButton构成了一个单选框
数据
list:[
{
index:1,
radioList: [
{
"id":"1",
"name":"item1",
},
{
"id":"2",
"name":"item2",
},
{
"id":"3",
"name":"item3",
}
]
},
{
index:2,
radioList: [
{
"id":"1",
"name":"item1",
},
{
"id":"2",
"name":"item2",
},
{
"id":"3",
"name":"item3",
}
]
},
{
index:3,
radioList: [
{
"id":"1",
"name":"item1",
},
{
"id":"2",
"name":"item2",
},
{
"id":"3",
"name":"item3",
}
]
}
]
render(){
let attributes=[];
let list = this.state.list
list.map((item,i)=>{
attributes.push(
<View style={styles.container}>
<View >
<RadioGroup
onSelect = {(index, value) => this.onSelect(index, value)}
size={20}
thickness ={2}>
{
item.radioList.map((elem,radioIndex) => {
return (
<RadioButton key={radioIndex} value={elem.id} >
<Text style={{ color: '#666666' }}>{elem.name}</Text>
</RadioButton>
)
})
}
</RadioGroup>
<Text>{this.state.text}</Text>
</View>
</View>
)
})
return(
<View>
{attributes}
</View>
)
}
选中的方法
onSelect(index, value){
this.setState({
text: `Selected index: ${index} , value: ${value}`
})
}