如何调用ListView.renderRow（）的highlightRow？

我似乎不知道如何使用属性ListView的renderRow

美国

（rowData、sectionID、rowID、highlightRow）=>可渲染

从数据源及其ID中获取数据项，并应返回一个可渲染组件以渲染为行。默认情况下，数据正是放入数据源的数据，但也可以提供自定义提取器。通过调用highlightRow函数，可以在高亮显示行时通知ListView。高亮显示行时，上方和下方的分隔符将隐藏。可以通过调用highlightRow（null）重置行的高亮显示状态

我想提醒大家注意电话线

通过调用highlightRow函数，可以在高亮显示行时通知ListView

当我

console.log（rowData，sectionID，rowID，highlightedRow）

时，我可以看到highlightedRow是一个具有以下签名的函数

function(sectionID,rowID){
  this.setState({highlightedRow:{sectionID:sectionID,rowID:rowID}});
}

它是从调用的（请参见

this.onRowHighlighted

）

；

---

有人能提供一个如何正确使用highlightRow的示例吗？

在研究ListView代码中的

highlightedRow

状态属性后，我发现它只用于计算传递给

renderSeparator

方法的

adjacentRowHighlighted

参数

（sectionID、rowID、邻接箭头高亮显示）=>可渲染

如果提供，将渲染为分隔符的可渲染组件 如果有节标题，则位于每行下方，但不是最后一行 在下面获取上面行的sectionID和rowID，并确定其 相邻行高亮显示

因此，我相信，

highlightRow

的唯一用例是为高亮显示的行呈现不同的分隔符。下面是一个简单的示例，它根据

adjacentRowHighlighted

参数更改分隔符背景颜色

<ListView
  renderRow={(rowData, sectionID, rowID, highlightRow) {
    return (
      <View>
        <TouchableOpacity
          onPress={() => highlightRow(sectionID, rowID)
        >
          {row content here}
        </TouchableOpacity>
      </View>
    );
  }}
  renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => {
    return (
      <View
        key={`${sectionID}-${rowID}`}
        style={{
          height: 1,
          backgroundColor: adjacentRowHighlighted ? 'blue' : 'red',
        }} 
      />
    );
  }}
/>

{此处的行内容}
);
}}
RenderParator={（sectionID、rowID、邻接箭头高亮显示）=>{
返回(
);
}}
/>

@halib，我肯定认为你的思路是对的，但我没能让你的例子起作用。我正在深入研究，但你有没有碰巧亲自测试一下，看看它是否真的有效？顺便说一句，我在rnplay上放了一份我现在所在位置的副本。如果你能把它叉出来，帮我让它工作，那就太棒了@ChrisGeirman，问题是分隔符的宽度。无法计算它，因为未定义行和列表视图的宽度。增加宽度：200；ListView的风格可以解决这个问题：干得好@halilb掌声谢谢你的帮助。你能想出一种方法用它来改变高亮显示行的背景色吗？我认为当前的ListView实现是不可能的。我想您应该更改ListView代码，将AdjaceEntrowHighlighted参数传递给render方法，或者自己在自己的组件中实现它。

<ListView
  renderRow={(rowData, sectionID, rowID, highlightRow) {
    return (
      <View>
        <TouchableOpacity
          onPress={() => highlightRow(sectionID, rowID)
        >
          {row content here}
        </TouchableOpacity>
      </View>
    );
  }}
  renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => {
    return (
      <View
        key={`${sectionID}-${rowID}`}
        style={{
          height: 1,
          backgroundColor: adjacentRowHighlighted ? 'blue' : 'red',
        }} 
      />
    );
  }}
/>