webentwicklung-frage-antwort-db.com.de

So erhalten Sie den aktuell sichtbaren Index in der RN-Flatlist

Ich habe eine horizontale flache Liste, in der jeder Artikel width:300 Ist. Ich versuche nur, den Index des aktuell sichtbaren Artikels abzurufen.

<FlatList 
            onScroll={(e) => this.handleScroll(e)} 
            horizontal={true}
            data={this.state.data}
            renderItem...

Versuchte dies:

handleScroll(event) {
    let index = Math.ceil(
      event.nativeEvent.contentOffset.x / 300
    );

Und so ähnlich:

handleScroll(event) {
  let contentOffset = event.nativeEvent.contentOffset;
  let index = Math.floor(contentOffset.x / 300);

aber nichts ist genau Ich bekomme immer einen Index nach oben oder einen nach unten.
Was mache ich falsch und wie erhalte ich den korrekten aktuellen Index in einer flachen Liste?

Ich erhalte zum Beispiel den 8. Platz in einer Liste, aber den Index 9 oder 10.
enter image description here

javascriptreact-nativereact-native-flatlistreact-native-scrollview
18
1110

[~ # ~] upd [~ # ~] . Danke an fzyzcjy für den Hinweis, dass onViewableItemsChanged nicht aktualisiert werden sollte

Sie können FlatList onViewableItemsChanged verwenden, um das zu bekommen, was Sie wollen.

class Test extends React.Component {
  onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log("Visible items are", viewableItems);
    console.log("Changed in this iteration", changed);
  }

  render () => {
    return (
      <FlatList
        onViewableItemsChanged={this.onViewableItemsChanged }
        viewabilityConfig={{
          itemVisiblePercentThreshold: 50
        }}
      />
    )
  }
}

viewabilityConfig kann Ihnen dabei helfen, die gewünschten Einstellungen für die Sichtbarkeit vorzunehmen. Im Codebeispiel 50 bedeutet, dass das Element als sichtbar betrachtet wird, wenn es für mehr als 50 Prozent sichtbar ist.

Die Konfigurationsstruktur finden Sie hier

35
Roman Osypov
this.handleScroll = (event) => {
  let yOffset = event.nativeEvent.contentOffset.y
  let contentHeight = event.nativeEvent.contentSize.height
  let value = yOffset / contentHeight
}

<FlatList onScroll={this.handleScroll} />

Ermitteln Sie den Rundungswert zur Berechnung der Seitenzahl/des Index.

5
Sujit

Vielen Dank an die am häufigsten gewählte Antwort :) Es funktioniert jedoch nicht, wenn ich es versuche und einen Fehler auslöst, der besagt, dass changing onViewableItemsChanged on the fly is not supported. Nach einiger Suche finde ich die Lösung hier . Hier ist der vollständige Code, der fehlerfrei ausgeführt werden kann. Der entscheidende Punkt ist, dass die beiden Konfigurationen als Klasseneigenschaften anstatt innerhalb der render () -Funktion abgelegt werden sollten.

class MyComponent extends Component {  
  _onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log("Visible items are", viewableItems);
    console.log("Changed in this iteration", changed);
  };

  _viewabilityConfig = {
    itemVisiblePercentThreshold: 50
  };

  render() {
    return (
        <FlatList
          onViewableItemsChanged={this._onViewableItemsChanged}
          viewabilityConfig={this._viewabilityConfig}
          {...this.props}
        />
      </View>
    );
  }
}
5
fzyzcjy

Mit verwandten @ fzyzcjy's und @ Roman's Antworten. Ab Version 16.8 können Sie mit uscCallback das changing onViewableItemsChanged on the fly is not supported Error.

function MyComponent(props) {
    const _onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
        console.log("Visible items are", viewableItems);
        console.log("Changed in this iteration", changed);
    }, []);

    const _viewabilityConfig = {
        itemVisiblePercentThreshold: 50
    }

    return <FlatList
            onViewableItemsChanged={_onViewableItemsChanged}
            viewabilityConfig={_viewabilityConfig}
            {...props}
        />;
}
1
tiran