React Native - 如何在ListView中添加和追加數據而無需完全重新渲染

Question

我一直在努力解決這個問題很長一段時間了。

我看過StackOverflow和解決方案的其他問題，但我找不到一個清晰的。

我知道我可以預先使用完整的重新渲染，但我不知道如何在沒有完全重新渲染的情況下預先安裝。

我想我可以用非索引鍵實現這一點，當我上傳數據到ListView，但我不知道如何或在哪裏分配非索引鍵。 （非索引意味着ListView用於比較舊行和新行的鍵不僅僅取決於數據源數組的索引）

所以這些是我的問題。

1. 如何分配非索引鍵？

2. 如果我能成功分配非索引鍵，那麼我是否可以在兩種情況下都能夠做出可附加和可附加ListView，但不會重新呈現所有行？

3. 如果沒有，那麼你怎麼解決這個問題？因爲這似乎是一個非常常見的問題，我很驚訝ListView還沒有這個功能。

*另外，我已經看了PrependableListView在GitHub上，但似乎ListViewDataSource的精確副本..我缺少的東西？如果在PrependableListView中有一些我錯過了，那麼有人可以指出哪裏？

爲了幫助理解我的問題，下面是我正在使用的測試代碼。

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    ListView, 
    RefreshControl, 
    View 
} from 'react-native'; 

export default class Test1 extends Component { 
    constructor(props){ 
    super(props); 
    const arr = []; 
    this.state = { 
      dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}), 
      refreshing: false, 
     }; 
    } 

    componentWillMount(){ 
    this.arr = []; 
    for(let i = 0; i < 16; i++){ 
     this.arr.push({keyy: i, data: "row " + i}); 
    } 

    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(this.arr), 
    }); 
    } 

    _onRefresh() { 
    this.setState({refreshing: true}); 
    let i = this.arr.length; 
    let arr1 = []; 
    arr1.unshift({keyy: i, data: "row " + i}); 
    for(var index = 0; index < this.arr.length; index++){ 
     arr1.push(this.arr[index]); 
    } 
// console.log(this.arr); 
// console.log("arr1 : " + arr1.length); 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(arr1), 
     refreshing: false, 
    }); 
    } 

    _renderRow(rowData: string, sectionID: number, rowID: number){ 
// console.log(rowData.data + " : " + sectionID + " : " + rowID); 
    return(
     <Text style={{fontSize: 50}}>{rowData.data}</Text> 
    ); 
    } 

    _onEndReached(){ 
    let i = this.arr.length; 
    let arr1 = []; 
    for(var index = 0; index < this.arr.length; index++){ 
     arr1.push(this.arr[index]); 
    } 
    arr1.push({keyy: i, data: "row " + i}); 

    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(arr1), 
    }); 
    } 

    render() { 
    return (
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this._renderRow.bind(this)} 
      refreshControl={ 
       <RefreshControl 
       refreshing={this.state.refreshing} 
       onRefresh={this._onRefresh.bind(this)} 
       /> 
      } 
      onEndReachedThreshold={0} 
      onEndReached={this._onEndReached.bind(this)} 
     /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

AppRegistry.registerComponent('Test1',() => Test1); 

正如你可以在代碼中看到，我「unshifting」在_onRefresh功能列，以及在_onEndReached功能「推」的行。請注意，這會起作用，但在_onRefresh上完全重新渲染。我需要的只是重新呈現我不移或推動的那一排。

此外，這是我認爲這是如何工作的。

當我比較爲空兩個dataBlobs .. 老：[0,1,2,3,4,5] 新：[6,0,1,2,3,4,5]

ListView.DataSource中的默認檢查器默認將鍵（或RowIDs）指定爲dataBlob數組的索引。 （newsource.rowIdentities.push（Object.keys（dataBlob [sectionID]）） 這意味着在上面所示的情況下，新的dataBlob將有[0,1,2,3,4,5,6]作爲關鍵字，然後比較newDataBlob [sectionID] [0]與oldDataBlob [sectionID] [0] - > 6！= 0 - >重新呈現 newDataBlob [sectionID] [1] with oldDataBlob [sectionID] [1] - > 0！= 1 - >重新渲染 newDataBlob [sectionID] [2] with oldDataBlob [sectionID] [2] - > 1！= 2 - >重新渲染 oldDataBlob [sectionID] [3] with oldDataBlob [sectionID] [ 3] - > 2！= 3 - >重新渲染 newDataBlob [sectionID] [4] with oldDataBlob [sectionID] [4] - > 3！= 4 - >重新渲染 newDataBlob [sectionID] [ 5]與oldDataBlob [sectionID] [5] - > 4！= 5 - >重新渲染 newDataBlob [sectionID] [6]與oldDataBlob [sectionID] [6] - > oldDataBlob [sectionID] [6]未定義 - >重新渲染

Answer 1

嘗試使用FlatList代替已棄用ListView。 可能它不會有這樣的問題...