Changer la couleur du bouton onPress (fonctionnalité de basculement) React Native

Question

espérons que tout va bien. 

Je semble avoir des difficultés avec une fonctionnalité de bouton de base. Tout ce dont j'ai besoin est l'état de la classe à changer et le style du bouton à changer chaque fois que le bouton est enfoncé. Contrairement à TouchableHighlight, je dois changer de couleur pour rester jusqu'à ce que vous appuyiez de nouveau sur le bouton (pour revenir à la couleur d'origine).

J'ai essayé d'utiliser SwitchIOS mais cela ne semble pas être facilement transformé en bouton circulaire et ne fonctionne donc pas vraiment. Je suis un novice, j'apprends encore et j'apprécierais grandement votre aide. Voici ce que j'ai jusqu'à présent:

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var Icon = require('react-native-vector-icons/FontAwesome');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  Image, 
  TouchableHighlight,
  TextInput,
} = React;


class LS1 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      paleo: false, 
      vegan: false, 
      vegetarian: false, 
      nutfree: false, 
      dairyfree: false, 
      healthy: false,
      glutenfree: false,
    }
  }

  SkipLogin() {
    var num = window.height/8.335;
    console.log(num);
  }

  render() {
    return (
      <View style={styles.container}>
        <Image source={require('image!LS1')} style={styles.bgImage}>
          <Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>

          <View style={styles.container}>
            <View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice}>
                  <Image style={styles.bubblechoice} source={require('image!vegan')}>
                    <View style={styles.overlay}>
                      <Text style={styles.choicetext}>Vegan</Text>
                    </View>
                  </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!paleo')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Paleo</Text>
                  </View>
                </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!nutfree')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Nut-Free</Text>
                  </View>
                </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!glutenfree')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Gluten-Free</Text>
                  </View>
                </Image>
              </TouchableHighlight>
            </View>

            <View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-50}}>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!dairyfree')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Dairy-Free</Text>
                  </View>
                </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!vegetarian')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Vegetarian</Text>
                  </View>
                </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,1)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!healthy')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Healthy</Text>
                  </View>
                </Image>
              </TouchableHighlight>
            </View>
          </View>

          <Image source={require('image!nextbtn')} style={{resizeMode: 'contain', width:200, height:50, alignSelf: 'center', marginBottom: 50}}/>

          <TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
            <View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
              <Text>skip this step</Text>
            </View>
          </TouchableHighlight>

        </Image>
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  bgImage: {
    flex: 1,
    width: window.width,
    resizeMode: 'cover',
  },
  icontext: {
    color: '#5d5d5d',
    fontWeight: '400',
    fontSize: 20,
    backgroundColor: 'transparent',
    paddingLeft: 10,
    alignItems: 'center',
    marginTop: window.height/2.2,
    textAlign: 'center',
    margin: 10,
  },
  bubblechoice_click: {
    height: window.height/8.335,
    borderRadius: (window.height/8.3350)/2,
    marginRight: 2,
    width: window.height/8.335,
  },
  bubblechoice: {
    height: window.height/8.335,
    borderRadius: (window.height/8.3350)/2,
    marginRight: 2,
    width: window.height/8.335,
  },
  row: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: -30,
  },
  choicetext: {
    alignItems: 'center',
    alignSelf: 'center',
    color: 'white',
    marginTop: 35,
    fontWeight: '600',
    marginLeft: -18,
    fontSize: 14,
    flex: 1,
    textAlign: 'center'
  },
  overlay: {
    backgroundColor:'rgba(80,94,104,0.7)',
    height: 100,
    width: 100,
    alignItems:'center'
  },

});

module.exports = LS1;

Et voici un visuel de ce que cela produit:

 

Voici à quoi devrait ressembler le bouton après avoir été sélectionné:

 

Answer 1

Je pense que vous devriez prendre du recul et faire quelques tutoriels de base sur React avant de trop approfondir React Native - il s’agit d’un problème assez simple à résoudre :) Voici une solution pour vous:

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  Image,
  TouchableHighlight,
  TextInput,
} = React;

class ToggleButton extends React.Component {

  render() {
    return (
      <TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice} onPress={this.props.onPress}>
          <Image style={styles.bubblechoice} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}>
            <View style={[styles.overlay, this.props.selected ? {backgroundColor: 'rgba(80,94,104,0)'} : {}]}>
              <Text style={styles.choicetext}>{this.props.label}</Text>
            </View>
          </Image>
      </TouchableHighlight>
    );
  }
}


class LS1 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      paleo: false,
      vegan: false,
      vegetarian: false,
    }
  }

  updateChoice(type) {
    let newState = {...this.state};
    newState[type] = !newState[type];
    this.setState(newState);
  }

  SkipLogin() {
    var num = window.height/8.335;
    console.log(num);
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.bgImage}>
          <Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>

          <View style={styles.container}>
            <View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
              <ToggleButton label='Vegan' onPress={() => { this.updateChoice('vegan') }} selected={this.state.vegan} />
              <ToggleButton label='Paleo' onPress={() => { this.updateChoice('paleo') }} selected={this.state.paleo} />
              <ToggleButton label='Vegetarian' onPress={() => { this.updateChoice('vegetarian') }} selected={this.state.vegetarian} />
            </View>
          </View>

          <TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
            <View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
              <Text>skip this step</Text>
            </View>
          </TouchableHighlight>

        </View>
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  bgImage: {
    flex: 1,
    width: window.width,
    resizeMode: 'cover',
  },
  icontext: {
    color: '#5d5d5d',
    fontWeight: '400',
    fontSize: 20,
    backgroundColor: 'transparent',
    paddingLeft: 10,
    alignItems: 'center',
    marginTop: window.height/2.2,
    textAlign: 'center',
    margin: 10,
  },
  bubblechoice_click: {
    height: window.height/8.335,
    borderRadius: (window.height/8.3350)/2,
    marginRight: 2,
    width: window.height/8.335,
  },
  bubblechoice: {
    height: window.height/8.335,
    borderRadius: (window.height/8.3350)/2,
    marginRight: 2,
    width: window.height/8.335,
  },
  row: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: -30,
  },
  choicetext: {
    alignItems: 'center',
    alignSelf: 'center',
    color: 'white',
    marginTop: 35,
    fontWeight: '600',
    marginLeft: -18,
    fontSize: 14,
    flex: 1,
    textAlign: 'center'
  },
  overlay: {
    backgroundColor:'rgba(80,94,104,0.7)',
    height: 100,
    width: 100,
    alignItems:'center'
  },

});

module.exports = LS1;

AppRegistry.registerComponent('main', () => LS1);

Vous pouvez l'essayer en téléchargeant Exponent sur votre téléphone à partir de http://exponentjs.com/ (app store ou version bêta, selon votre préférence), puis en chargeant exp: //exp.Host/@brentvatne/button- couleur-exp

Answer 2

Plus simple avec TouchableOpacity et styles actifs:

<TouchableOpacity
style={ this.state.active? styles.btnActive : styles.btn}
onPress={() => this.setState({active: !this.state.active})}>

</TouchableOpacity>