Làm cách nào để gọi highlightRow của ListView.renderRow()?

Question

Tôi không thể tìm ra cách sử dụng renderRow của thuộc tính ListView highlightRow.

Các ListView.renderRow Documentation bang ...

(hàngDữ liệu, sectionid, ROWID, highlightRow) => renderable

Takes a nhập dữ liệu từ các nguồn dữ liệu và id của nó và phải trả lại một renderable thành phần được hiển thị dưới dạng hàng. Theo mặc định dữ liệu là chính xác những gì đã được đưa vào nguồn dữ liệu, nhưng nó cũng có thể cung cấp các trình giải nén tùy chỉnh. ListView có thể được thông báo khi một hàng được đánh dấu bằng cách gọi hàm highlightRow. Các dấu phân tách ở trên và dưới sẽ bị ẩn khi một hàng được tô sáng. Trạng thái được đánh dấu của một hàng có thể được đặt lại bằng cách gọi highlightRow (null).

Tôi muốn kêu gọi sự chú ý đến dòng ...

ListView có thể được thông báo khi liên tiếp được nhấn mạnh bằng cách gọi highlightRow chức năng.

khi tôi console.log(rowData, sectionID, rowID, highlightedRow), tôi có thể thấy rằng highlightedRow là một chức năng với chữ ký sau đây ...

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

được gọi là từ here in the source code (xem this.onRowHighlighted) ...

<StaticRenderer 
    key={'r_' + comboID} 
    shouldUpdate={!!shouldUpdateRow} 
    render={this.props.renderRow.bind(
    null, 
    dataSource.getRowData(sectionIdx, rowIdx), 
    sectionID, 
    rowID, 
    this.onRowHighlighted 
)} 
/>; 

Có ai có thể cung cấp ví dụ về cách sử dụng highlightRow chính xác không?

Answer 1

Sau khi điều tra thuộc tính trạng thái highlightedRow trạng thái trong mã ListView, tôi đã thấy rằng nó chỉ được sử dụng để tính tham số adjacentRowHighlighted được chuyển đến phương thức renderSeparator.

(sectionid, ROWID, adjacentRowHighlighted) => renderable

Nếu được cung cấp, một thành phần renderable để được trả lại như tách bên dưới mỗi hàng nhưng không phải là hàng cuối cùng nếu có một tiêu đề phần phía dưới. Lấy một sectionID và rowID của hàng bên trên và liệu hàng liền kề của nó có được đánh dấu hay không.

Vì vậy, tôi tin rằng trường hợp sử dụng duy nhất cho highlightRow sẽ hiển thị một dấu phân cách khác cho các hàng được đánh dấu. Dưới đây là một ví dụ đơn giản thay đổi màu nền của dải phân cách dựa trên đối số 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', 
     }} 
     /> 
    ); 
    }} 
/>