1
votes

Comment faire défiler jusqu'à la page suivante avec un événement de bouton et non un geste dans React Native

Je veux passer à la page suivante par un événement de bouton au lieu de faire défiler avec un geste. Ce que je veux dire par là, c'est que si je devais appuyer sur le bouton Next , je veux que la page défile jusqu'à la page suivante.

Voici mon code avec deux pages:

export default () => {
    const [animation] = useState(new Animated.Value(0))

    const onPressHandler = () => {
      // this is where I expect the logic should be
    }

    return (
        <SafeAreaView style={styles.container}>
            <ScrollView
                pagingEnabled
                horizontal
                scrollEventThrottle={16}
                showsHorizontalScrollIndicator={false}
                onScroll={Animated.event([
                    {
                        nativeEvent: {
                            contentOffset: {
                                x: animation,
                            }
                        }
                    }
                ])}
            >
                <View style={{ width }}>
                    <Text>First Page</Text>
                    <Button title="Next" onPress={onPressHandler} />
                </View>
                <View style={{ width }}>
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

reactjs react-native scrollview

0 commentaires

3 Réponses :

2
votes

Vous pouvez faire défiler directement en utilisant la fonction scrollTo du composant ScrollView , il est très utile pour maintenir la position de défilement en fonction de l' ScrollView comme ci-dessous.

index=e.nativeEvent.contentOffset.x/width

N'oubliez pas d'obtenir une page correcte, assurez-vous que la largeur de l'écran de la couverture de la vue est totale.Ainsi, un effet d'accrochage peut être obtenu en cliquant sur le bouton suivant.

Vous pouvez obtenir l'index en divisant le décalage par la largeur de l'écran.

moveBody = index => {
      this.scrollRef.scrollTo({
        x: index * width,
        animation: false
      })
  }

<ScrollView pagingEnabled ref={node=>this.scrollRef=node}>
 ...
</ScrollView

Vous pouvez accéder à e partir d' ScrollView événement de défilement onScroll/onMomentumEnd.... comme onScroll/onMomentumEnd....

Vous pouvez également désactiver le mouvement de défilement en attribuant false à la scrollEnabled .

2 commentaires

Comment faire cela dans un composant fonctionnel utilisant useRef?

@Kevvv - comment avez-vous résolu ce problème? Pourriez-vous nous aider s'il vous plaît, en fournissant le code?

2
votes

Le comportement de pagingEnabled et de snapToInterval ScrollView est activé par les événements tactiles et fling. Ils ne seront donc pas déclenchés par le défilement par programme.

Votre onPressHandler devra calculer la valeur x correcte en fonction de la page vers laquelle vous voulez faire défiler, puis appeler scrollTo({x: targetPageX, y: 0, animated: true}) .

0 commentaires

0
votes

J'ai mis en œuvre les conseils de @tvanlaerhoven .

componentDidMount() {
    const _scrollView = createRef();
  }

  nextArrowHandler = page => {

    let gotoPage = 1;
    if (page == 2) {
      gotoPage = 2;
    } else if (page == 3) {
      gotoPage = 3;
    }

    this._scrollView.scrollTo({
      x: width * gotoPage,
      y: 0,
      animated: true
    });
  };
// ...

 <ScrollView
          ref={ref => (this._scrollView = ref)}
// ...
>
<IntroScreenComponent
    nextArrow={this.nextArrowHandler.bind(this, "1")}
// ...

/>
<IntroScreenComponent
    nextArrow={this.nextArrowHandler.bind(this, "2")}
// ...

/>

J'ai 3 composants IntroScreenComponent dans le ScrollView et dans chaque composant je déclenche la fonction nextArrowHandler passant le number page, que je multiplie ensuite par la width de l'écran.

Merci ;)

0 commentaires