どのように反応し、ネイティブ

Question

に表示のリストを再ロードする私はこのような要素のリストを持って、

<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> 

後私は現在のページをリロードする方法を変数から削除した要素を削除しましたか？

Answer 1

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