प्रदर्शन अनुकूलन प्रतिपादन

Question

से मूल सूची दृश्य टेक्स्ट इनपुट लॉक प्रतिक्रियाएं मैं अपनी सूचीदृश्य की प्रत्येक पंक्ति में निहित प्रत्येक टेक्स्टिनपुट के लिए एक राज्य मान सेट करने का प्रयास कर रहा हूं।

समस्या यह है कि, प्रतिक्रियात्मक मूल सूची सूची घटक में स्क्रीन सीमाओं से बाहर पंक्तियों को हटाने जैसे अनुकूलन तकनीकों का एक समूह है। इससे कोई समस्या आ रही है क्योंकि टेक्स्ट इनपुट अपने मूल्य प्रॉपर्टी को लॉक कर रहे हैं, उन्हें संपादित करने से अब परिवर्तनों को प्रतिबिंबित नहीं किया जाएगा और राज्य मूल्य लॉक हो जाएगा या कुछ। मैंने इस व्यवहार को दिखाने के लिए एक वीडियो संलग्न किया है।

https://www.youtube.com/watch?v=fq7ITtzRvg4&feature=youtu.be

_renderRow(value){ 
    let tempWidth = window.width/2.13 
    if(value.data.length == 1){ 
     tempWidth = window.width*0.970 
    } 
    var Images = value.data.map((b,i) => { 
     let source = { uri: BUCKETIMAGES+'/'+b.image_filename} 
     return (
      <TouchableOpacity key={i} style={styles.cardImage}> 
       {b.profile_picture && 
       <View style={{zIndex: 4, width:31,height:31,borderWidth:1,borderColor:"#ccc",borderRadius:20, position: "absolute", right: -6, top: -6}}> 
        <CacheableImage style={{width:30,height:30,borderWidth:3,borderColor:"white",borderRadius:15,position: "absolute", right: 0, top: 0}} source={{uri: BUCKETIMAGES+'/'+b.profile_picture}}/> 
       </View> 
       } 
       <CacheableImage source={source} style={{height: 150, width: tempWidth}}/> 
      </TouchableOpacity> 
     ) 
    }); 
    return(
      <View key={value.id} style={styles.statusContainer}> 
       <View style={[styles.statusHeader,{height: 50, alignItems: "center"}]}> 
        <View style={{flex:0.85}}> 
          <View style={{flexDirection: "row"}}> 
           <Text style={{color: "#666666", fontWeight: "bold", fontSize: 18, paddingLeft: 20}}>Team {value.type}</Text> 
          </View> 
          <Text style={{color: "grey", fontSize: 15, paddingLeft: 20, paddingRight: 20}}>{value.date}</Text> 
        </View> 
        <View style={{flex:0.15,height: 20, justifyContent: "center",width: 30}}> 
          <Icon name="ios-more" type="ionicon" size={40} color="#a9a9a9" /> 
        </View> 
       </View> 
       <View style={{flexDirection: "row", flexWrap: "wrap"}}> 
        { Images } 
       </View> 
       <View style={{zIndex: 10}}> 

       </View> 
       <View style={[styles.commentHeader,{height: 30,flex:0.8, zIndex: 5}]}> 
        <View style={{height: 30, width: 40}}> 
          <Icon name="ios-chatboxes-outline" type="ionicon" size={30} color="grey" /> 
        </View> 
        <View style={{flex:0.9}}> 
          <TextInput 
           style={styles.commentInput} 
           placeholder="Say something..." 
           placeholderTextColor="gray" 
           underlineColorAndroid="transparent" 
           multiline={true} 
           blurOnSubmit={true} 
           value={this.state['comment'+value.id]} 
           onChangeText={(commentInput) => {this.setState({["comment"+value.id]: commentInput})}} 
          /> 
        </View> 
        <View style={{justifyContent: "center", marginRight: 20}}> 
         <TouchableOpacity onPress={() => {this.setState({commentID: value.id}, this.addComment)}}> 
          <Icon name="md-send" type="ionicon" size={25} color="#CCC" /> 
         </TouchableOpacity> 
        </View> 
       </View>  
      </View> 
    ) 
} 

render() { 
    return(
     <View style={styles.container}> 
      {Platform.OS === "ios" && 
      <View style={styles.statusBar}></View> 
      } 
      {this.state.loading && 
      <ActivityIndicator 
       animating={true} 
       color="#E91E63" 
       size="large" 
       style={{marginTop: 80}} 
      /> 
      } 
      {!this.state.loading && 
      <ListView 
        dataSource = {this.state.dataSource} 
        renderRow = {this._renderRow.bind(this)} 
        initialListSize={10} 
        enableEmptySections={true} 
      />} 
     </View> 
    ) 
} 

Answer 1

मैं एक घटक बनाने प्रत्येक पंक्ति रेंडर करने के लिए तो प्रत्येक आइटम अपनी राज्य धारण कर सकते हैं सलाह देते हैं। मैंने ListView के साथ 500+ पंक्तियों के साथ कुछ ऐसा किया है और यह अच्छी तरह से काम करता है।

Answer 2

प्रतिक्रिया-मूल 0.45.1 के साथ, मैंने जल्दी ही 1000 पंक्तियों के साथ यह नकली बना दिया और टेक्स्ट इनपुट ठीक काम करता है। यह आपके डेमो में लॉक नहीं होता है .... भले ही आप अंत तक नीचे और पीछे की ओर स्क्रॉल करते हैं, TextInput राज्य उचित है, और अभी भी संपादन योग्य है।

मैं इस मॉडल से शुरू करने का सुझाव देता हूं, और यह देखने के लिए अपना कार्यान्वयन करता हूं कि यह कहां टूटता है।

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


const mocks = [] 
for (var i = 0; i < 1000; i++) { 
    mocks.push({ 
    id:i, 
    text: `I am row ${i}` 
    }) 
} 


export default class test extends Component { 

    constructor(){ 
    super() 
    this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 }) 
    this.state = { 
     ds: this.ds.cloneWithRows(mocks), 
    } 
    } 

    renderRow = (value) => { 
    return(
     <View style={ styles.rowContainer }> 
     <Text>{ value.text }</Text> 
     <TextInput 
      style={ styles.textInput } 
      value={ this.state[`comment${value.id}`] } 
      onChangeText={ (text) => this.setState({ [`comment${value.id}`]:text }) } 
     /> 
     </View> 
    ) 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ListView 
      dataSource={ this.state.ds } 
      renderRow={ this.renderRow } 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#F5FCFF', 
    }, 
    rowContainer:{ 
    padding:10, 
    marginBottom:10, 
    backgroundColor: 'rgb(222,222,222)' 
    }, 
    textInput:{ 
    backgroundColor: 'white', 
    height: 50, 
    } 
}); 

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