使用FlatList和scrollToEnd

我有兩個問題，當使用FlatList（這兩個工作與ListView）。使用FlatList和scrollToEnd

我有一個通過顯示屬性中顯示的每個項目，然後在我的FlatList檢查，像這樣的列表：

<FlatList 
    ref='flatList' 
    data={this.state.dataSource} 
    enableEmptySections 
    renderItem={({item}) => item.display && <Text>{item.text}</Text>} />

當我改變顯示屬性，但是，它沒有顯示。這在ListView安裝中運行良好。

我的第二個問題是scrollToEnd在scrollToEnd函數內的「this._listref」上觸發了一個未定義的錯誤。我沒有傳遞任何參數。

setTimeout(this.refs.flatList.scrollToEnd, 0)

我的問題是，我該如何更新我的陣列中的數據的列表，在列表中的變化，第二個問題是，我該如何解決scrollToEnd錯誤？

更新1：（數據刪除，不需要了）

更新2：問題一解決，列表需要「而額外」比較，看它是否更新。固定版本：

<FlatList 
    ref='flatList' 
    data={this.state.dataSource} 
    extraData={this.state} 
    enableEmptySections 
    renderItem={({item}) => item.display && <Text>{item.text}</Text>} />

這有點複雜，但我相信extraData的作用是比較數據集中是否有任何更新。如果是這樣，重新渲染。這個問題解決了。

「未定義不是（評價 'this._listRef'）的對象」還是不固定

更新3：滾動功能工作IF截取的setTimeoutfunction外

更新4 ：

設置初始數據陣列

this.state = { 
    dataSource: pageService(state.params.page), 
    cursor: 0 
    }

設置顯示爲真：

renderNextModule() { 
    let newCursor = this.state.cursor 
    if (newCursor < this.state.dataSource.length-1) { 

     newCursor++ 
     let newSource = this.state.dataSource 
     newSource[newCursor].display = true 
     this.setState({ 
      dataSource: newSource, 
      cursor: newCursor 
     }) 
    } 
    }

來源

2017-06-07 Organiccat

FlatList中的淺平等決定不重繪？我會 – Organiccat

第一個問題解決了我的數據的部分更新，更新 – Organiccat

再次更新，這似乎是具體到把它在一個包裝「的setTimeout」功能 – Organiccat

this._listRef是不確定的，因爲setTimeout調用功能，並將其上下文（本）爲null。

作爲一種變通方法，可以實際使用（這裏ES6語法）的包裝功能：

setTimeout(() => this.refs.flatList.scrollToEnd(), 0)

關於你的第一個問題，我不認爲你正在解決的正確方法。你說得對，它使用淺層比較，但你可能不需要extraData道具。

你是否直接改變你的數組？你如何更新item.display屬性？

對於你的第一個問題，
替換該行

let newSource = this.state.dataSource

通過這個

let newSource = this.state.dataSource.slice()

在JavaScript中，數組是通過引用複製的，這意味着你沒有克隆數組但改變它;和FlatList是有效的（這是每一個PureComponent），當你想重新呈現它（通過設置像你這樣的狀態），它在其新老道具===比較，看是否有任何改變。

當你被變異的舊數組，「oldArray === newArray」，所以它決定不再更新。

這有點簡潔快速，但您可以閱讀更多關於爲什麼您需要創建一個新陣列與.slice()here。 JavaScript中的數組和對象是這樣的。

來源

2017-06-08 01:00:56 whitep4nther

該陣列是一個狀態值，所以我使用的setState到更改。初始值從另一個函數「pageData（pageNumber）」中返回。我也通過setState更新item.display屬性。我將與代碼 – Organiccat

更新我忘了我的綁定... scrollToBottom其中修復了這個問題 this.scrollToBottom = this.scrollToBottom.bind（本）聽到有關如何你可能會重新呈現區域仍然對雖然（如果你在溶液中看到一個問題上面） – Organiccat

增加了一個解決方案，並解釋:) – whitep4nther

使用FlatList和scrollToEnd

回答

相關問題