2016-12-08 47 views
0

我有這樣的元素的列表清單,如何重裝鑑於反應母語

<ScrollView style={[styles.mainContainer, styles.tripsContainer]}> 
     <View style={{ 
     flex: 1, 
     flexDirection: 'row', 
     justifyContent: 'center', 
     alignItems: 'center', 
     marginBottom: 10 
     }}> 
     <Text textAlign='center' style={{ fontWeight: 'bold' }}>{100 - (totalDuration/24).toFixed(0)} days and {totalDuration % 12} hours required...</Text> 
     </View> 
     {rows} 
     <Animated.View shouldRasterizeIOS={true}> 
     <ActivityIndicator animating={!tripsReady} style={[styles.centering, { height: 80 }]} size="large" /> 
     </Animated.View> 
    </ScrollView> 

這裏{行}包含這樣的數組,

<TouchableHighlight key={i} onPress={() => { 
    // get rest of the trip data from meteor; 
    NavigationActions.tripDetails({record:record, tripId:i+1,removeTrip:(id)=>this.removeTrip(id)});}}> 
    <View> 
     <TripCard tripNo={i + 1} date={timeStarted} duration={record.trip.duration} distance={record.trip.distance.toFixed(2)} vehicle={record.trip.vehicle} /> 
    </View> 
    </TouchableHighlight> 

後我從行變量中刪除了一個元素如何重新加載當前頁面?

回答

2

只需在組件狀態中存儲必須呈現到rows中的數據,並在適當時觸發更新。例如:

constructor(){ 
    super(); 
    this.state = {rowData: ['row1Data', 'row2Data'] }; // Any data type will do. You can also start with an empty array and then populate it. 
} 


// ... 
render(){ 
    let rows = this.state.rowData.map(record, i => 
    <TouchableHighlight key={i} onPress={() => { 
     // get rest of the trip data from meteor; 
     NavigationActions.tripDetails({record:record, tripId:i+1,removeTrip:(id)=>this.removeTrip(id)}); 
     let rowData = this.state.rowData.slice(); // Make a copy of the state 
     rowData.splice(i,1); // Remove the entry 
     this.setState({rowData}); // Set the new data 
     }}> 
     <View> 
      <TripCard tripNo={i + 1} date={timeStarted} duration={record.trip.duration} distance={record.trip.distance.toFixed(2)} vehicle={record.trip.vehicle} /> 
     </View> 
     </TouchableHighlight>); 
    // Proceed as usual with the value of {rows} in the return value 
+0

謝謝@matinarroyo –