Android 如何在React Native中从滚动视图的顶部转到底部？

我在一个React Native项目中，客户希望产品图像在模式中从上到下滚动，反之亦然，我如何才能做到这一点？

我已经知道如何解决这个问题

我必须创建一个计数器，每0.5秒增加或减少ScrollView的Y轴，并检查是否达到顶部或底部

在模态组件文件中：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Modal, ScrollView, View, Image, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';

import { Feather } from '@expo/vector-icons';

const ImageModal: React.FC<{ product: ProductType }> = ({ product }) => {

    const [ axisY, setAxisY ] = useState<number>(0); // State that is used to know the current Y axis of ScrollView 
    const [ scrollToTop, setScrollToTop ] = useState<boolean>(false); // State that is used to checks if should go to top or bottom

    // Handler that checks if ScrollView is scrolling to top or bottom
    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {

        // HELP: https://newbedev.com/detect-scrollview-has-reached-the-end

        const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent; // Get scroll event properties

        // If scrolling to top
        if (scrollToTop) {
            const isNearTop = contentOffset.y != 0; // Checks if Y axis reached the top of ScrollView
            setScrollToTop(isNearTop); // Change the state value to FALSE, making ScrollView goes to bottom
        } else {
            const isNearBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height; // Checks if Y axis reached the bottom of ScrollView
            setScrollToTop(isNearBottom); // Change the state value to TRUE, making ScrollView goes to top
        }

    }

    // Increase or decrease current Y axis every 0.5 seconds
    useEffect(() => {
        const timer = setInterval(() => {
            setAxisY(prev => !scrollToTop ? prev + 1.5 : prev - 1.5);
        }, 50);

        return () => clearInterval(timer);
    }, [scrollToTop]);

    return (
        <Modal
            visible={ true }
            transparent={ true }
            statusBarTranslucent={ true }
            animationType="fade"
        >
            <View style={ styles.container }>
                <View style={ styles.box }>
                    <ScrollView 
                        overScrollMode="never" 
                        style={ styles.scroll }
                        scrollEnabled={ false }
                        showsVerticalScrollIndicator={ false }
                        contentOffset={{ x: 0, y: axisY }}
                        onScroll={ handleScroll }
                    >
                        <View style={ styles.imageBox }>
                            <Image source={{ uri: product.image_url }} style={ styles.image } />
                        </View>
                    </ScrollView>

                    <View>
                        <Text>Some random text!</Text>
                    </View>
                </View>

                <TouchableOpacity style={ styles.closeButton } onPress={ onClose }>
                    <Feather name="x" size={ 30 } color="#fff" />
                </TouchableOpacity>
            </View>
        </Modal>
    );

}

// Main Styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        padding: 20
    },
    closeButton: {
        width: 60,
        height: 60,
        borderWidth: 2,
        borderRadius: 12,
        marginLeft: 20,
        borderColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#58585a'
    },
    box: {
        backgroundColor: '#fff',
        width: '80%',
        borderRadius: 10,
        flexDirection: 'column'
    },
    scroll: {
        width: '100%',
        height: '80%',
        borderBottomWidth: 1,
        borderColor: '#58585a'
    },
    imageBox: {
        width: '100%',
        height: 600,
    },
    image: {
        width: '100%',
        height: '100%',
        resizeMode: 'cover',
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10
    }
});

export default ImageModal;

import React，{useState，useffect}来自“React”；
从“react native”导入{样式表、模式、滚动视图、视图、图像、NativeSyntheticEvent、NativeScrolleEvent}；
从“@expo/vector icons”导入{Feather}；
常量ImageModal:React.FC=（{product}）=>{
const[axisY，setAxisY]=useState（0）；//用于了解ScrollView当前Y轴的状态
const[scrollToTop，setScrollToTop]=useState（false）；//用于检查是否应转到顶部或底部的状态
//检查ScrollView是否滚动到顶部或底部的处理程序
const handleScroll=（事件：NativeSyntheticEvent）=>{
//帮助：https://newbedev.com/detect-scrollview-has-reached-the-end
const{layoutmasurement，contentOffset，contentSize}=event.nativeEvent；//获取滚动事件属性
//如果滚动到顶部
如果（滚动到顶部）{
const isNearTop=contentOffset.y！=0；//检查y轴是否到达ScrollView的顶部
setScrollToTop（isNearTop）；//将状态值更改为FALSE，使ScrollView进入底部
}否则{
const isNearBottom=layoutmasurement.height+contentOffset.y>=contentSize.height；//检查y轴是否到达ScrollView的底部
setScrollToTop（isNearBottom）；//将状态值更改为TRUE，使ScrollView位于顶部
}
}
//每0.5秒增加或减少电流Y轴
useffect（（）=>{
常量计时器=设置间隔（（）=>{
setAxisY（prev=>！scrollToTop？prev+1.5:prev-1.5）；
}, 50);
返回（）=>clearInterval（计时器）；
}，[scrollToTop]）；
返回(
一些随机文本！
);
}
//主要风格
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'行'，
背景颜色：“rgba（0,0,0,0.5）”，
填充：20
},
关闭按钮：{
宽度：60，
身高：60，
边界宽度：2，
边界半径：12，
marginLeft:20，
边框颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：“#585a”
},
方框：{
背景颜色：“#fff”，
宽度：“80%”，
边界半径：10，
flexDirection:“列”
},
滚动：{
宽度：“100%”，
身高：80%，
边界宽度：1，
边框颜色：“#585a”
},
图像框：{
宽度：“100%”，
身高：600，
},
图片：{
宽度：“100%”，
高度：“100%”，
resizeMode:“封面”，
borderTopLeftRadius:10，
BorderTopRight半径：10
}
});
导出默认图像模式；

也许这是一种更简单的方法：。您可以在想要滚动时添加条件