web-dev-qa-db-fra.com

Comment implémenter un bouton radio dans React Native

Je suis en train de convertir le code React en React Native. J'ai donc besoin d'implémenter des boutons radio.

iosreactjsreact-native
14
vasavi

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.

 enter image description here 

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>
  );
}
35
Lane Rettig

Il existe un composant réactif natif appelé react-native-radio-buttons qui peut répondre à certains de vos besoins:

 enter image description here

5
Andy

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

 enter image description here  enter image description here

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>
        )
      })
    );
  }
3
Bahu

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>
    );
}
1
Tishan Madhawa