javascript - 通过按下动画屏幕上的按钮滚动 - React Native

Question

我是 React Native 的新手。在我的仪表板页面上，3 个屏幕组件出现了滚动效果。我只能在屏幕上滚动页面时执行此操作。当单击此处代码底部的箭头 svg 时，我希望它切换到另一个屏幕。我怎样才能做到这一点？

我的代码：

import React, { useRef } from "react"
import { Animated, View } from "react-native"

import { LEVELSELECTION } from "../../navigation/routesNames"
import { units } from "../../theme/Units"
import ArrowSvg from '../../assets/svgs/arrow.svg'
import DashboardScreen from "../components/DashboardScreen"
import styles from "./styles/DashboardStyles"

export default function Dashboard({  navigation }) {

    function nextScreen() {
        navigation.navigate(LEVELSELECTION)
    }

    const slides = [
        {
            id: "1",
            page: DashboardScreen(1)
        },
        {
            id: "2",
            page: DashboardScreen(2)
        },
        {
            id: "3",
            page: DashboardScreen(3, nextScreen)
        },
    ]

    const Indicator = ({ scrollX }) => {
        return (
            <View style={styles.indicatorContainer}>
                {slides.map((_, index) => {
                    const inputRange = [(index - 1) * units.width, index * units.width, (index + 1) * units.width]

                    const scale = scrollX.interpolate({
                        inputRange,
                        outputRange: [0.7, 1.4, 0.7],
                        extrapolate: "clamp",
                    })
                    const opacity = scrollX.interpolate({
                        inputRange,
                        outputRange: [0.5, 1, 0.5],
                        extrapolate: "clamp",
                    })

                    return (
                        <Animated.View
                            key={`indicator-${index}`}
                            style={[
                                styles.indicator,
                                {
                                    transform: [{ scale }],
                                    opacity
                                }
                            ]}
                        />
                    )
                })}
            </View>
        )
    }

    const scrollX = useRef(new Animated.Value(0)).current

    return (
        <View style={styles.container}>
            <Animated.FlatList
                data={slides}
                keyExtractor={item => item.id}
                horizontal
                pagingEnabled
                scrollEventThrottle={32}
                onScroll={Animated.event(
                    [{ nativeEvent: { contentOffset: { x: scrollX } } }],
                    {
                        useNativeDriver: false,
                    }
                )}
                showsHorizontalScrollIndicator={false}
                renderItem={({ item }) => {
                    return (
                        <View>
                            {item.page}
                        </View>
                    )
                }} />
            <View style={styles.indicatorLocation}>
                <Indicator scrollX={scrollX}></Indicator>
            </View>
            <View style={styles.arrow}>
                <ArrowSvg />
            </View>
        </View>
    )
}

在我的代码底部，您可以看到 ArrowSvg。我想让你给这个箭头添加滚动效果。

标签： javascriptreact-nativeanimation