React-native 动态生成带有图像的 TouchableHighlight

Question

我有一个表单，用户可以在其中选择三个成员选项之一。我正确渲染了屏幕，但按钮切换不起作用。当我单击其他按钮时，勾号仍停留在第一个选项上。这是我的代码

<View style={styles.mainview}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) =>
              <TouchableHighlight onPress={() => this.toggleOneYear(rowData.id, rowData.i)} style={styles.registerButton} underlayColor='#ffffff'>
                <View style={styles.detailBoxTick}>
                  {renderIf(rowData.i == 1)(
                    <Image style={styles.imageTickStyle} source={this.state.payoneyear ? Images.rememberTickImg : Images.rememberUnTickImg} />
                  )}
                  {renderIf(rowData.i == 2)(
                    <Image style={styles.imageTickStyle} source={this.state.paytwoyear ? Images.rememberTickImg : Images.rememberUnTickImg} />
                  )}
                  {renderIf(rowData.i == 3)(
                    <Image style={styles.imageTickStyle} source={this.state.paythreeyear ? Images.rememberTickImg : Images.rememberUnTickImg} />
                  )}
                  <Text style={styles.tickBoxText}>
                    {rowData.card_duration} years Membership ${rowData.price}
                  </Text>
                </View>
              </TouchableHighlight>
            }
            enableEmptySections
          />
        </View>

toggleOneYear(id, counter) {

    if (counter == 1) {
      console.log('counter ', counter)
      console.log('payoneyear ', this.state.payoneyear)
      this.setState(
        {
          payoneyear: true,
          paytwoyear: false,
          paythreeyear: false
        }
      )
      console.log('payoneyear ', this.state.payoneyear)
    }
    else if (counter == 2) {
      console.log('counter ', counter)
      console.log('payoneyear ', this.state.paytwoyear)
      this.setState(
        {
          payoneyear: false,
          paytwoyear: true,
          paythreeyear: false
        }
      )
      console.log('paytwoyear ', this.state.paytwoyear)
    }
    else if (counter == 3) {
      console.log('counter ', counter)
      this.setState(
        {
          payoneyear: false,
          paytwoyear: false,
          paythreeyear: true
        }
      )
    }
  }

我在上面的代码中做错了什么？有人可以帮忙吗？提前致谢

Answer 1

您似乎需要使用新的 rowData 更新 dataSource。我猜你想在每个 touchableHighlight onPress 上增加rowData.i？

renderRow 的第三个参数是rowID。我们将需要它来知道我们需要更新哪一行。您可以将其传递给toggleOneYear 或将以下内容放在 TouchableHighlight onPress 中：

  var newArray = this.state.db.slice();
  newArray[rowID] = {
    // increment i, keep between 1-3
    i: newArray[rowID].i + 1 > 3 ? 1 : newArray[rowID].i + 1,
  };
  this.setState({
      dataSource: this.state.dataSource.cloneWithRows(newArray),
      db: newArray,
  });

我不确定您对 payxxxyear 状态变量的意图是什么，因为它们只有 3 个属性，并且您正在呈现列表数据，所以我假设您有许多 TouchableHighlights 将使用相同的状态。似乎应该改用数据源状态？

顺便说一句，ListView 在最新的 RN 版本中已被弃用。 https://facebook.github.io/react-native/docs/listview.html#renderrow