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>

此处 {rows} 包含此数组

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

我从rows变量中删除了一个元素后如何重新加载当前页面？

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

如何在react-native中重新加载View列表

1 个答案: