Question

我正在使用带有数据源的ListView，它将数据源从休息调用中获取到服务器。

  renderRow(rowData){
    var imageURL = rowData.banner;

    return (
      <View>
        <Text >{rowData.name}</Text>
        <Image
          style={{width: 80, height: 80}}
          source={{uri: imageURL, width: 400, height: 400}}
        />
      </View>
    );
  }

  render() {
    return (
      <View>
            <ListView
            enableEmptySections 
            dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} 
            style={styles.listview}/>

      </View>
)}

现在，我想为数据源中数据的renderRow函数中呈现的视图添加按钮效果。我已将代码更改为此。

     renderRow(rowData){
        var imageURL = rowData.banner;

        return (
        <TouchableHighlight style={ this.state.pressStatus ? styles.buttonPress : styles.button }
                            onPress={this._changeStyleAndNavigate.bind(this)}>
          <View>
            <Text >{rowData.name}</Text>
            <Image
              style={{width: 80, height: 80}}
              source={{uri: imageURL, width: 400, height: 400}}
            />
          </View>
 </TouchableHighlight>
        );
      }

  _changeStyleAndNavigate() {
    this.setState({ pressStatus: true });

  }

这款TouchableHighlight View有两种不同的款式，颜色各异。如果用户触摸TouchableHighlight视图，我会改变颜色，这样就可以按下按钮。

但现在问题是如果ListView中有多行，则按一行会改变所有行的颜色（TouchableHighlight Views）。

那么，有没有办法可以为每一行提供一个ID并根据ID更改颜色？

Answer 1

请参阅RN文档以更轻松地解决您的问题：https://facebook.github.io/react-native/docs/touchablehighlight.html

有一个名为underlayColor的组件属性。只需给它一个值（按下项目时想要看到的颜色）。所以你的组件应该是这样的：

<TouchableHighlight style={styles.button} underlayColor={'#ff0000'}>

在本地

1 个答案: