ボタンの色を押して変更（機能の切り替え）React Native

Question

すべてが順調であることを願っています。

基本的なボタン機能に問題があるようです。必要なのは、変更するクラスの状態と、ボタンを押すたびに変更するボタンのスタイルだけです。 TouchableHighlightとは異なり、ボタンをもう一度押すまで（元の色に戻るため）色を変更する必要があります。

SwitchIOSを使用しようとしましたが、円形のボタンに簡単にスタイル設定できないようであるため、実際には機能しません。私は初心者なのでまだ学習中であり、あなたの助けに感謝します。ここに私がこれまで持っているものがあります：

'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;

そして、これが生成するもののビジュアルです：

選択後のボタンは次のようになります。

Answer 1

Reactネイティブを掘り下げる前に、一歩下がって基本的なReactチュートリアルを行う必要があると思います-これは解決するのがかなり簡単な問題です:)ここにあなたのための解決策があります：

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

Exponentをお使いの携帯電話に http://exponentjs.com/ （アプリストアまたはベータ版のいずれか好きな方）からダウンロードして、exp：//exp.Host/@brentvatneをロードすることで試してみることができます。/button-color-exp

Answer 2

TouchableOpacityとアクティブなスタイルを使用した最も簡単な方法：

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

</TouchableOpacity>