Reagieren Native: Richtig scrollen in der horizontalen FlatList mit Element Separator

ReactNative: v0.52.0

Plattform: iOS

Meine FlatList code:

<FlatList
  horizontal
  pagingEnabled={true}
  showsHorizontalScrollIndicator={false}

  legacyImplementation={false}

  data={this.props.photos}
  renderItem={item => this.renderPhoto(item)}
  keyExtractor={photo => photo.id}

  ItemSeparatorComponent={this.itemSeparatorComponent}
/>

Element separator-code:

itemSeparatorComponent = () => {
    return <View style = {
        {
            height: '100%',
            width: 5,
            backgroundColor: 'red',
        }
    }
    />
}

Und schließlich FlatList Element Komponente:

renderPhoto = ({ item, index }) => {
    return (
        <View style = {{ width: SCREEN_WIDTH, height: 'auto' }}>
          <FastImage 
            style = { styles.photo }
            resizeMode = { FastImage.resizeMode.contain }
            source = {{ uri: item.source.uri }}
          /> 
        </View>
    )
}

Aber beim scrollen, die FlatList macht eine Abweichung der separator aber nicht an die linke Kante des Elements:

Reagieren Native: Richtig scrollen in der horizontalen FlatList mit Element Separator

Und mit jedem neuen element der FlatList fügt die Breite des alle vorherigen Trennzeichen offset:

Reagieren Native: Richtig scrollen in der horizontalen FlatList mit Element Separator

Machen, wie der FlatList Komponente betrachten Sie die Breite der separator-Komponente in horizontaler Bildlauf und machen richtigen offset?

InformationsquelleAutor Yury | 2018-02-04

3

Ich hatte das gleiche use-case. Für alle, die sich für eine Lösung, hier ist es.

Schritt 1) nicht ItemSeparatorComponent prop. Stattdessen Rendern Sie ihn in Ihre renderItem Komponente.

Schritt 2) (Key-point). Geben Sie die width und height im style prop der FlatList. Die width, in Ihrem Fall, sollte SCREEN_WIDTH + 5.

Dann Flatlist wird automatisch bewegen Sie den gesamten Bildschirm (Foto + separator) Weg, wenn die Paginierung aktiviert ist. So, jetzt Ihr code sollte in etwa so:-
```
<FlatList
  horizontal
  pagingEnabled={true}
  showsHorizontalScrollIndicator={false}
  legacyImplementation={false}
  data={this.props.photos}
  renderItem={item => this.renderPhoto(item)}
  keyExtractor={photo => photo.id}
  style={{width: SCREEN_WIDTH + 5, height:'100%'}}
/>
```
Render-Foto-code:-
```
renderPhoto = ({ item, index }) => {
return (
    <View style = {{ width: SCREEN_WIDTH + 5, height: 'auto', 
      flexDirection:'row'}}>
      <FastImage 
        style = { styles.photo }
        resizeMode = { FastImage.resizeMode.contain }
        source = {{ uri: item.source.uri }}
      /> 
      {this. itemSeparatorComponent()}
    </View>
)}
```
Element separator-code:
```
itemSeparatorComponent = () => {
return <View style = {
    {
        height: '100%',
        width: 5,
        backgroundColor: 'red',
    }
}
/>
}
```
Wenn Sie noch können ' T es herausfinden, dann schauen Sie auf diese Komponente:

https://github.com/zachgibson/react-native-parallax-swiper

Versuchen zu gehen in die Umsetzung, werden Sie sehen, dass dieser Kerl hat, sofern Breite und Höhe der Animated.ScrollView.

https://github.com/zachgibson/react-native-parallax-swiper/blob/master/src/ParallaxSwiper.js

Linie Nummer: 93 - 97

InformationsquelleAutor Yash Gadle
1

Die top-level-Sicht, die Sie zurückgeben, in der renderPhoto Funktion hat eine Breite von SCREEN_WIDTH, doch die ItemSeparatorComponent, die macht in zwischen jedes Element, nimmt eine Breite von 5 wie pro Ihre style-definition. Folglich, für jeden zusätzlichen Artikel, den Sie Blättern Sie zu, dass die anfängliche offset wird 5 mehr Pixel auf der linken Seite.

Um dies zu beheben, können Sie entweder entfernen Sie die ItemSeparatorComponent komplett, (wie Sie bereits pagingEnabled auf true gesetzt), oder legen Sie die Breite der top-level-Sicht wieder in renderPhoto gleich SCREEN_WIDTH - 2.5. So sehen Sie die Hälfte der Element separator auf der rechten Seite ein Foto und auf die andere Hälfte der linken Kante des nächsten Foto.

Eigentlich eine andere mögliche Lösung könnte sein, entfernen Sie das Element separator, stellen Sie die renderPhoto View's Breite zu SCREEN_WIDTH + 5, und dann fügen Sie diese zusätzlichen Eigenschaften in dem Stil: {paddingRight: 5, borderRightWidth: 5, borderRightColor: 'red'}. So die rote Trennlinie nicht sichtbar werden, bis das scrollen nach Links und rechts, weil der pagingEnabled Eigenschaft.

InformationsquelleAutor Pat Needham

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.