प्रतिक्रियात्मक मूल - सूची दृश्य में डेटा को प्रीपेन्ड और संलग्न कैसे करें बिना री-रेंडर

Question

मैं लंबे समय से इस समस्या को हल करने के लिए वास्तव में कड़ी मेहनत कर रहा हूं।

मैं StackOverflow और एक समाधान के लिए अन्य मुद्दों को देखा है लेकिन मैं एक स्पष्ट एक नहीं पा सके।

मुझे पता है कि मैं पूरी फिर से प्रस्तुत करना साथ पहले जोड़ें सकते हैं, लेकिन मैं नहीं जानता कि मैं कैसे बिना पूर्ण फिर से प्रस्तुत करना पहले जोड़ें कर सकते हैं।

मुझे लगता है मैं ListView में डेटा अपलोड करने पर मैं गैर सूचकांक कुंजी के साथ इस लक्ष्य को हासिल कर सकते हैं, लेकिन मैं नहीं जानता कि वास्तव में कैसे या जहां गैर सूचकांक कुंजी सौंपने के लिए।

तो ये मेरे सवाल कर रहे हैं (गैर सूचकांक कुंजी ListView अर्थ तुलना करने के लिए वर्ष पंक्तियों और नई पंक्तियाँ सिर्फ डेटा स्रोत की सरणी के सूचकांक पर निर्भर नहीं है का उपयोग करता है)।

1. मैं कैसे आवंटित गैर सूचकांक कुंजी करते हैं?

2. यदि मैं गैर-इंडेक्स कुंजी निर्दिष्ट करने में सफल होता हूं, तो क्या मैं दोनों प्रीपेन्डेबल और एपेंडेबल लिस्ट व्यू बनाने में सक्षम हूं जो दोनों मामलों में सभी पंक्तियों को फिर से प्रस्तुत नहीं करता है?

3. यदि नहीं, तो आप इस समस्या को कैसे हल कर रहे हैं ?? क्योंकि यह एक बहुत ही आम समस्या की तरह लगता है और मुझे आश्चर्य है कि ListView में अभी तक यह कार्यक्षमता नहीं है।

* इसके अलावा, मैं PrependableListView GitHub पर देखा है, लेकिन यह ListViewDataSource का एक सटीक प्रतिलिपि की तरह लगता है .. मैं कुछ कमी है? अगर ऐसा कुछ है जो मैं प्रीपेन्डेबल लिस्ट व्यू में चूक गया, तो क्या कोई यह बता सकता है कि कहां?

मेरी समस्या को समझने में सहायता के लिए, नीचे परीक्षण कोड है जिसका उपयोग मैं कर रहा हूं।

/** 
* 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) असाइन करेगा। (newsource.rowIdentities.push (ऑब्जेक्ट.कीज (डेटाब्लोब [सेक्शनआईडी])) ऊपर दिखाए गए मामले में कौन सा मतलब है, नए डेटाब्लोब के पास चाबियों के रूप में [0,1,2,3,4,5,6] होगा, फिर तुलना करें newDataBlob [sectionID] [0] oldDataBlob [sectionID] के साथ [0] -> 6! = 0 -> नयाडेटाब्लोब [सेक्शनआईडी] [1] पुरानाडेटाब्लोब [सेक्शनआईडी] [1] -> 0! = 1 -> फिर से प्रस्तुत करना newDataBlob [sectionID] [2] के साथ oldDataBlob [sectionID] [2] -> 1 = 2 -!> फिर से प्रस्तुत करना newDataBlob [sectionID] [3] के साथ oldDataBlob [sectionID] [ 3] -> 2 = 3 -> फिर से प्रस्तुत करना newDataBlob [sectionID] [4] के साथ oldDataBlob [sectionID] [4] -> 3 = 4 -> फिर से प्रस्तुत करना newDataBlob [sectionID] [ 5] पुरानाडेटाब्लोब [सेक्शनआईडी] [5] -> 4!= 5 -> फिर से प्रस्तुत करना newDataBlob [sectionID] [6] के साथ oldDataBlob [sectionID] [6] -> oldDataBlob [sectionID] [6] अपरिभाषित -> के बजाय फिर से प्रस्तुत करना

Answer 1

कोशिश उपयोग FlatListListView बहिष्कृत। संभव है कि इसमें ऐसी समस्या नहीं होगी ...