Question

嘿，伙计们可以帮助我解决这个问题。我的问题与改进应用程序的用户体验有关。我通过一个循环渲染了手风琴，循环通过一个按钮呈现数据。我想改变按下的按钮的颜色，从而有助于UX。但是因为所有按钮都在转动它们的颜色而遇到问题。问题是我从状态呈现颜色可以任何人帮助我解决一些不同的问题。

这是我渲染手风琴的循环：

{this.state.services.map((tab, i) => {
            return(
              <ScrollView key={i} tabLabel={tab.category} style={{flex: 1}}>
                {tab.names.map((name, j) => this.renderRow(name))}
              </ScrollView>
            )
          })}

这是渲染功能：

＆＃13;

  renderRow (rowData) {
    var header = (
      rowData.subGroup.length > 1 ? <View>
        <Text>{rowData.name}</Text>
      </View>
      :
      <View>
        <View style={{flex: 1}}>
          <Text>{rowData.name}</Text>
          <Text>{rowData.subGroup[0].duration}Min</Text>
        </View>
        <Text>₹{rowData.subGroup[0].price.M ? rowData.subGroup[0].price.M : rowData.subGroup[0].price.F}</Text>
        <TouchableOpacity onPress={() => this._add(rowData.subGroup[0])}>
          <View style={styles.buttonView}>
            <Text style={styles.buttonText}>ADD</Text>
          </View>
        </TouchableOpacity>
      </View>

    );

    var content = (
      <View style={{flex: 1}}>
        {rowData.subGroup.map((sg, i) => {

            return(
              sg.subGroup ? <View>
                  <View style={{flex: 1}}>
                    <Text>{sg.subGroup ? sg.subGroup : sg.name}</Text>
                    <Text>{sg.duration}Min</Text>
                  </View>
                  <Text style={styles.price}>₹{sg.price.M ? sg.price.M : sg.price.F}</Text>
                  <TouchableOpacity onPress={() => this._add(sg)}>
                    <View style={styles.buttonView}>
                      <Text style={styles.buttonText}>ADD</Text>
                    </View>
                  </TouchableOpacity>
              </View>
              :
              <View></View>
            )

        })}
      </View>
    );

    return (
      <Accordion
        key={rowData.name}
        header={header}
        content={content}
        easing="easeOutCubic"
      />
    );
  }

＆＃13;

任何人都可以通过不同的方法指导我吗？

Answer 1

伙计们我发现解决方案只是写了一个简单的函数并返回true或false。基于返回值和三元运算符i更改所选值的样式

这是一个解决方案：

  <View style={this._toggleServiceButtonView(sg) ? styles.removeView : styles.buttonView}>
    <Text style={this._toggleServiceButtonView(sg) ? styles.removeText : styles.buttonText}>
      {this._toggleServiceButtonView(sg) ? 'REMOVE' : 'ADD'}
    </Text>
  </View>

这是我只是检查所选值是否在购物车数组中返回true的函数。

_toggleServiceButtonView(data) {
    return this.state.cartArr.length != 0 && this.state.cartArr.findIndex((service) => {
      if(service.service._id === data._id){
        return true;
      } else {
        return false;
      }
    }) !== -1
  }

如何改变通过循环渲染的按钮上的按钮的设计（例如颜色）？

1 个答案: