web-dev-qa-db-fra.com

React Native Animated.ScrollView ne me permet pas de faire défiler par programme jusqu'à une certaine position

Avant la mise à niveau vers la dernière version de React-Native et Expo, ce bloc de code fonctionnait. La version sur laquelle il travaillait était "expo": "^32.0.0".

J'étais auparavant capable de déplacer par programme un enfant d'Animated.ScrollView et maintenant je ne suis plus en mesure de le faire. Voici mon bloc de code de test que je teste.

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableOpacity,
  SafeAreaView,
  ScrollView
} from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleMove = () => {
    this.scroller.getNode().scrollTo({
      x: 200,
      y: 0,
      animated: false
    });
  };
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Animated.ScrollView
          horizontal
          ref={scroller => {
            this.scroller = scroller;
          }}
        >
          <View
            style={{
              height: 100,
              width: 100,
              backgroundColor: 'red',
              margin: 5
            }}
          />
        </Animated.ScrollView>
        <TouchableOpacity onPress={this.handleMove}>
          <Text>Move</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {}
});

Après la mise à niveau, le bloc de code ne fonctionne plus sur la dernière version. La version actuelle sur laquelle je teste est:

"dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-web": "^0.11.4"
  },

Quelle est la bonne façon de procéder?

J'ai ajouté une collation pour illustrer mon problème. " https://snack.expo.io/@louis345/brave-banana

react-nativescrollview
9
Louis345

J'ai pu résoudre mon problème en ajoutant un accessoire à scrollView. scrollToOverflowEnabled={true}

Maintenant, tout fonctionne comme avant. J'espère que cela aidera quelqu'un à l'avenir.

1
Louis345

J'ai eu un problème similaire après la mise à niveau de 0,57 à 0,60.

Il semble que quelque chose ait changé avec le calendrier de montage (entre les versions RN). Je reverrai mon code (dans quelques jours), car je soupçonne que j'utilise certaines des fonctions de cycle de vie qui seront bientôt déconseillées. Le fait qu'ils soient désormais considérés comme "dangereux" à utiliser peut être dû à des problèmes de timing (estimation folle).

J'ai réussi à faire fonctionner mon code en plaçant simplement scrollTo dans un délai de 100 ms. Cela indique que le scrollview n'est pas tout à fait monté au premier essai. Je suis en fait d'accord avec le délai d'expiration de mon cas d'utilisation, mais je veux résoudre ce problème de toute façon parce que je n'aime pas les solutions hacky.

0
Michael

Vous pouvez essayer ceci

<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
  scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
  onScroll={Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: {x: 200,y: 0},
        },
      },
    ],
    {useNativeDriver: true}, // <-- Add this
  )}>
  {content}
</Animated.ScrollView>
0
hong developer

J'ai pu faire fonctionner cela en utilisant un simple setTimeout de 1 seconde.

Voici à quoi ressemble mon code maintenant:

setTimeout(() => {
  this.scrollView.scrollTo({
    x: DEVICE_WIDTH * current_index,
    y: 0,
    animated: false
  });
}, 1)

Semblable à ce que Micheal a suggéré ci-dessus, il est probable que cela soit dû à un problème de montage dû au composant obsolète WillMount dans React qui n'a pas été correctement mis à jour dans ScrollView.

0
Monte Thakkar