Реагировать на нативный элемент стиля на карте - PullRequest
Новая
       7

Реагировать на нативный элемент стиля на карте

0 голосов
/ 10 мая 2018

У меня есть этот код, который генерирует кнопки для размера, как в API, например (al, l, m, s ...), и мне нужно указать определенный стиль, когда пользователь нажимает в одном круге, я пробовал этот код, но он делает одинаковый стиль для всех кругов, и мне нужно изменить стиль для одного круга при нажатии на него: 

<View style={{ paddingTop: 10, width: "49%" }}>
                <View style={styles.sizeView}>
                  <View style={styles.sizeView3}>
                    <Text style={styles.chartText}>{t("size")}</Text>
                  </View>
                </View>
                <View style={styles.sizeButtons}>
                  {this.state.productsList[0].sizes.map((item, index) => {
                    return (
                      <TouchableOpacity
                        key={index}
                        onPress={() => this.toggle1(item)}
                        style={
                          !this.state.pressStatus
                            ? styles.sizes
                            : styles.sizesAlt
                        }
                        onHideUnderlay={this._onHideUnderlay.bind(this)}
                        onShowUnderlay={this._onShowUnderlay.bind(this)}
                      >
                        <Text
                          key={index}
                          style={
                            !this.state.toggle1 ? {} : { color: "#EC1C24" }
                          }
                        >
                          {item}
                        </Text>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              </View>

перетаскиваю рис для результата enter image description here

1 Ответ

0 голосов
/ 10 мая 2018

Проблема в том, что вы используете одну переменную для изменения состояния переключения для всех кнопок (this.state.toggle1), поэтому, если один из них переключается, все они будут переключаться, так как я не думаю, что это предназначено поведение. Я предлагаю создать чистый компонент для кнопок, чтобы каждая из них имела свое собственное состояние и управляла переключением независимо.

Что касается стиля, они работают 2 синтаксиса: 

 style={  !this.state.toggle ? {} : { color: "#EC1C24", backgroundColor: 'red' }}

или 

  style={[ this.state.toggle && {color: "#EC1C24", backgroundColor: 'red'} ]}

Итак, сначала создайте компонент для кнопки круга 

export class CircleButton extends Component {
  constructor(props) {
     super(props);
     this.state = {
       toggled: false
     };
 }
 render() {
   return (
      <TouchableOpacity
                    key={index}
                    onPress={() => this.toggle1(item)}
                    style={
                      !this.state.pressStatus
                        ? styles.sizes
                        : styles.sizesAlt
                    }
                    onHideUnderlay={this.props.onHideUnderlay.bind(this)}
                    onShowUnderlay={this.props.onShowUnderlay.bind(this)}
                  >
                    <Text
                      key={index}
                      style={
                        !this.state.toggle ? {} : { color: "#EC1C24" }
                      }
                    >
                      {item}
                    </Text>
      </TouchableOpacity>
   );
 }
}

И измени свой взгляд на что-то вроде этого 

        <View style={{ paddingTop: 10, width: "49%" }}>
            <View style={styles.sizeView}>
              <View style={styles.sizeView3}>
                <Text style={styles.chartText}>{t("size")}</Text>
              </View>
            </View>
            <View style={styles.sizeButtons}>
              {this.state.productsList[0].sizes.map((item, index) => {
                return (
                  <CircleButton  
                     onHideUnderlay={this._onHideUnderlay.bind(this)}
                     onShowUnderlay={this._onShowUnderlay.bind(this)}/>
                );
              })}
            </View>
          </View>
...