wake-up-neo.com

Wie kann ich die Scroll-Position mit flatlist beibehalten, wenn Sie in native native navigieren?

Ich bin neu, um nativ zu reagieren. Ich habe Probleme mit der Beibehaltung der Position der Flatlist, wenn Sie vorwärts navigieren und dann zu diesem Bildschirm zurückkehren. 

Aktuelles Verhalten
Wenn Sie vorwärts und dann zurück navigieren, geht die Bildlaufposition verloren. 

Erwartetes Verhalten
Beim Navigieren in einer umfangreichen Liste von Elementen blättert der Benutzer in der Liste nach unten und klickt auf ein Element. Die App wechselt zur nächsten Seite, auf der die Produktdetails angezeigt werden. Wenn der Benutzer beschließt, zurück zu navigieren, blättert die Seite nicht zum vorherigen Punkt. 

javascriptreactjsreact-native
9
Pulkit Aggarwal

Versuchen Sie, die Bildlaufposition in einem Status zu ändern:

<FlatList onScroll={this.handleScroll} />

handleScroll Methode:

handleScroll: function(event: Object) {
 this.setState({ scrollPosition: event.nativeEvent.contentOffset.y });
}

Dann können Sie scrollToOffset (this.state.scrollPosition) verwenden, wenn Sie zurück navigieren.

9
Marcos Demétrio

Ich verwende die response-navigation, um zwischen einer FlatList und einer Detailansicht zu navigieren. Ich verwende auch react-redux, um den Status zu verfolgen. Hier ist der Prozess, dem ich gefolgt bin.

  • Hören Sie grundsätzlich auf Änderungen am Navigator und speichern Sie den Namen der aktuellen Route in redux
  • Wenn Sie ein Element in Ihrer FlatList auswählen, merken Sie sich den Index des ausgewählten Elements
  • Wenn Sie zu Ihrer FlatList zurückkehren, berechnen Sie den Versatz für diesen Index und scrollen Sie

Das ist alles etwas leichter gesagt als getan, und in meiner eigenen Komponente sind die Zeilen in meiner FlatList variabel, so dass die Berechnung des Offsets kompliziert wird. In diesem Beispiel wird davon ausgegangen, dass Ihre Zeilen gleich sind

Meine App-Komponente, die den Navigator rendert

handleNavigationStateChange = (prevState, newState) => {
    this._getCurrentRouteName(newState)
}

_getCurrentRouteName = (navState) => {
    if (navState.hasOwnProperty('index')) {
        this._getCurrentRouteName(navState.routes[navState.index])
    } else {
        // This is my redux action to save route name
        this.props.updateCurrentRoute( navState.routeName )
    }
}

<AppNavigator onNavigationStateChange={this.handleNavigationStateChange} />

Meine Komponente mit der FlatList sieht so aus

// Renders a row for the FlatList with TouchableHighlight to call viewCreation
renderItem = ( row ) => {
    let creation = row.item
    return (
        <CreationCard onPress={this.viewCreation} index={row.index} creation={creation} />
    )
}

viewCreation = ( index ) => {
    // Get the creation
    let currentCreation = this.props.creations[index]
    // Another reducer saves both my item and index that was selected
    this.props.setSelectedIndex(currentCreation, index)
    // Navigate to the details screen
    this.props.navigation.navigate('CreationDetailScreen')
}

// Assuming all rows are 50 height
getItemLayout = (data, index) => {
    return {length: 50, offset: 50 * index, index}
}

// We mapped the 'currentRoute' property to this component so check
// the props when the component receives new ones.
componentWillReceiveProps( nextProps ){
    // If the currentRoute matches the route for this screen
    if( nextProps.currentRoute === 'CreationListScreen' ){
        // If we also know the last index that was selected on this page
        if( this.props.lastCreationIndex ){
            // Calculate the offset for the last index selected
            let y = this.props.lastCreationIndex * 50
            // and finally scroll to the offset
            this._flatList.scrollToOffset({
                offset: y,
                animated: true
            })
        }
    }
}


// IMPORTANT to include getItemLayout
render(){
    return(
    <FlatList
       ref={(fl) => this._flatList = fl}
       data={this.props.creations}
       renderItem={this.renderItem}
       getItemLayout={this.getItemLayout}
       keyExtractor={creation => creation.id}
       />
    )
}
1
Kerkness