Come implementare il pulsante di opzione in React Native

Question

Sto convertendo il codice React in React Native. Quindi ho bisogno di implementare i pulsanti radio.

Answer 1

C'è una componente di reagire-nativo chiamato react-native-radio-buttons che possono fare un po 'di quello che ti serve:

Answer 2

è possibile simulare un pulsante di scelta molto facilmente usando solo RN barebone. Ecco una semplice implementazione che utilizzo. Modifica le dimensioni, i colori ecc. Come preferisci. Sembra questo (con una tinta diversa, e del testo). Aggiungi TouchableOpacity in alto per trasformarlo in un pulsante che fa qualcosa.

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