在 React Native 的 ListView 数据源中使用 Touchable 高亮显示

Posted 2023-02-22

【中文标题】在 React Native 的 ListView 数据源中使用 Touchable 高亮显示

【英文标题】：Using Touchable highlight in a ListView datasource in react native

【发布时间】：2017-05-31 13:06:08

【问题描述】：

我正在使用带有数据源的 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 提供了 2 种不同颜色的不同样式。如果用户触摸 TouchableHighlight 视图，我会更改颜色，这样会产生按钮按下的感觉。

但现在我的问题是，如果 ListView 中有不止一行，那么按下一行会改变所有行的颜色（TouchableHighlight 视图）。

那么，有没有一种方法可以为每一行指定一个 ID 并根据 ID 更改颜色？

【参考方案1】：

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

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

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