2
votes

FlatList défile automatiquement au premier lorsque les données sont trop volumineuses en mode horizontal (RTL)

Environnement

<FlatList
    style={{
        flexDirection: 'row',
        marginHorizontal: -wp('3%'),
        zIndex: 40
    }}
    initialNumToRender={10}
    data={this.state.data}
    horizontal={true}
    key={item => item.groupNo}
    keyExtractor={(item, index) => index.toString()}
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
    ref={ref => (this.flatList = ref)}
    renderItem={({ item }) => (
        <Item item={item} />
    )}
/>

Version native de React: 0.60.4

Code

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
    Memory: 1.35 GB / 7.87 GB
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5791312

Étapes à suivre pour reproduire

J'ai ajouté des données à ma FlatList
Ajouter la propriété horizontale = {true} à la liste plate
Définissez I18nManager.allowRTL(true)
Définissez I18nManager.forceRTL(true)
Faire étendre mon composant renderItem en tant que PureComponent.
Utilisation d'un vrai appareil Android

Comme vous le voyez ci-dessous, lorsque mon application fonctionne sur la direction RTL, FlatList défile automatiquement vers le haut / le premier de la liste mais la direction LTR est OK!

RTL:

RTL_GIF

LTR:

LTR_GIF

android react-native react-native-flatlist

0 commentaires

3 Réponses :

-1
votes

essayez de faire le truc comme expliqué dans l'exemple avec la méthode onEndReached. https://snack.expo.io/r1NMSxFwr

Essayez également de jouer avec initialNumToRender.

1 commentaires

Je les ai tous essayés! Le problème est que la simple direction de l'application aura du sens!

0
votes

J'ai aussi un même problème ce problème, et ma solution (vous les ajoutez dans votre Flatlist). J'espère vous aider. Ce lien peut vous aider à améliorer votre liste: https://github.com/filipemerker/flatlist-performance-tips

getItemLayout={(data, index) => (
        { length: LECTURE_ITEM_HEIGHT, offset: LECTURE_ITEM_HEIGHT * index, index }
      )}
maxToRenderPerBatch={20}
initialNumToRender={10}
windowSize={10}
removeClippedSubviews={true}

1 commentaires

Merci je vais vérifier ça

1
votes

pour l'instant, vous pouvez vérifier l'événement onScroll, sur init cela provoque un événement de défilement majeur, vous pouvez simplement retourner false là-bas et bloquer le défilement. J'espère qu'une meilleure solution viendra dans les prochaines versions.

0 commentaires