Je suis en train de convertir le code React en React Native. J'ai donc besoin d'implémenter des boutons radio.
Vous pouvez très facilement imiter un bouton radio en utilisant uniquement RN barebones. Voici une implémentation simple que j'utilise. Ajustez la taille, les couleurs, etc. comme vous le souhaitez. Cela ressemble à ceci (avec une teinte différente et du texte). Ajoutez TouchableOpacity
en haut pour le transformer en un bouton qui fait quelque chose.
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>
);
}
Il existe un composant réactif natif appelé react-native-radio-buttons qui peut répondre à certains de vos besoins:
C’est une autre façon de créer des boutons radio ( Source , grâce au canal pas à pas de php)
Méthode 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'
}
});
Placez les images ci-dessous dans le dossier img
Méthode 2
LaneRettig ex élaboré pour les nouveaux développeurs
Merci à 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>
)
})
);
}
J'utilise Checkbox
dans react-native
pour créer le bouton radio. Veuillez vous référer au code ci-dessous.
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>
);
}