Question

我很长时间以来一直在努力解决这个问题。

我已经看过StackOverflow和解决方案的其他问题，但我找不到明确的问题。

我知道我可以在完全重新渲染前添加，但我不知道如何在没有完全重新渲染的情况下进行前置。

我认为当我将数据上传到ListView时，我可以用非索引键实现这一点，但我不确切知道如何或在何处分配非索引键。（非索引意味着ListView用于比较旧行和新行的键不仅仅依赖于数据源数组的索引）

所以这些是我的问题。

如何指定非索引键？
如果我成功分配了非索引键，那么我是否能够在两种情况下都不能重新呈现所有行的BOTH可附加AND可附加ListView？
如果没有，那你怎么解决这个问题？因为这似乎是一个非常常见的问题，我很惊讶ListView还没有这个功能。

*另外，我在GitHub上查看了PrependableListView，但它看起来像是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);

正如您在代码中看到的那样，我不会撤消＆＃39; _onRefresh函数中的一行，以及＆＃39;推送＆＃39; _onEndReached函数中的一行。请注意，这将有效，但在_onRefresh上完全重新渲染。我需要的只是重新渲染我不移动或推动的行。

此外，我认为这是如何运作的。

当我比较两个dataBlobs时如下.. 旧：[0,1,2,3,4,5] 新：[6,0,1,2,3,4,5]

默认检查器默认情况下将键（或RowID）指定为dataBlob数组的索引。（newsource.rowIdentities.push（Object.keys（dataBlob [sectionID]））这意味着在上面显示的情况下，new dataBlob将[0,1,2,3,4,5,6]作为键，然后将newDataBlob [sectionID] [0]与oldDataBlob [sectionID] [0]进行比较 - ＆gt ; 6！= 0 - ＆gt;重新渲染 newDataBlob [sectionID] [1] with oldDataBlob [sectionID] [1] - ＆gt; 0！= 1 - ＆gt;重新渲染 newDataBlob [sectionID] [2] with oldDataBlob [sectionID] [2] - ＆gt; 1！= 2 - ＆gt;重新渲染 newDataBlob [sectionID] [3] with oldDataBlob [sectionID] [3] - ＆gt; 2！= 3 - ＆gt;重新渲染 newDataBlob [sectionID] [4] with oldDataBlob [sectionID] [4] - ＆gt; 3！= 4 - ＆gt;重新渲染 newDataBlob [sectionID] [5] with oldDataBlob [sectionID] [5] - ＆gt; 4！= 5 - ＆gt;重新渲染 newDataBlob [sectionID] [6] with oldDataBlob [sectionID] [6] - ＆gt; oldDataBlob [sectionID] [6] undefined - ＆gt;重新渲染

Answer 1

尝试使用FlatList而不是弃用的ListView。可能它不会有这样的问题...

React Native - 如何在ListView中预先添加和附加数据而不完全重新渲染

1 个答案: