Как перейти к следующей странице с событием кнопки, а не жестом в React Native

Question

Я хочу перейти на следующую страницу по событию кнопки вместо прокрутки жестом.Я имею в виду, что если бы я нажал кнопку Next, я бы хотел, чтобы страница была прокручена до следующей страницы.

Ниже приведен мой код с двумя страницами:

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>
    )
}

Answer 1

Вы можете осуществлять прокрутку напрямую, используя функцию scrollTo компонента ScrollView. Это очень полезно для поддержания позиции прокрутки на основе индекса. Используйте ее, как показано ниже.

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

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

Не забудьте получить правильную страницу, убедитесь, чтовся ширина экрана обложки. Так что эффект щелчка может быть достигнут с помощью следующего нажатия кнопки.

Индекс можно получить, разделив смещение на ширину экрана.

index=e.nativeEvent.contentOffset.x/width

Вы можете получить доступ к e из ScrollView события прокрутки, например onScroll/onMomentumEnd....

Вы также можете отключить жест прокрутки, назначив false для scrollEnabled prop.

Answer 2

Оба действия pagingEnabled и snapToInterval ScrollView активируются событиями touch и fling.Таким образом, они не будут вызваны программной прокруткой.

Ваш onPressHandler должен будет рассчитать правильное значение x на основе страницы, на которую вы хотите перейти, а затем вызвать scrollTo({x: targetPageX, y: 0, animated: true}).