在地图中反应原生特定样式项目

Question

我有这个代码可以生成来自 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>

我拖动图片查看结果

Answer 1

问题是您正在使用一个变量来更改所有按钮的切换状态（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>