taro/src/components/layout/layout.tsx

import { View, Text, ScrollView } from "@tarojs/components";
import './layout.scss'
import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
import { useEffect, useRef, useState } from "react";
import Taro, { usePageScroll } from "@tarojs/taro";
import { rpxToPx } from "@/utils/tools";

let useNavigation;
let GradientText
let RefreshControl;
let ScrollViewRN;
if (process.env.TARO_ENV == 'rn') {
    ScrollViewRN = require("react-native").ScrollView
    RefreshControl = require("react-native").RefreshControl
    GradientText = require('@/components/basic/GradientText').default
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function Layout(props: {
    children: React.ReactNode,
    type: TemplateType,
    refresh?: Function,
    more?: Function,
    triggered?: boolean,
    title?: string,
    titleColor?: string,
    header?: React.ReactNode,
    secondPage?: boolean,
    isFastSleepTheme?: boolean,
    titleShowStyle: NaviBarTitleShowType,
    showPullToRefresh?: boolean,
    // ref?: any
}) {
    const { children, type, triggered } = props;
    const [isRefreshing, setIsRefreshing] = useState(false)
    const scrollRef = useRef(null);
    const [scrollTop, setScrollTop] = useState(0)
    const [showTitle, setShowTitle] = useState(props.titleShowStyle == NaviBarTitleShowType.alwayShow)
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }



    useEffect(() => {
        Taro.setNavigationBarTitle({
            title: showTitle ? props.title ? props.title : '' : ''
        })

        if (navigation) {
            navigation.setOptions({
                headerTitle: showTitle ? props.title ? props.title : '' : '',
            });
        }
        // setTimeout(() => {
        //     if (process.env.TARO_ENV == 'rn') {
        //         setScrollTop(100)
        //         // debugger
        //         // (scrollRef.current as any).scrollToOffset(100,true)
        //     }

        // }, 8000)
    }, [showTitle, props.title])

    function onRefresh() {
        if (props.refresh) {
            props.refresh()
        }
        setIsRefreshing(true)
        setTimeout(() => {
            setIsRefreshing(false)
        }, 1000)
    }

    function onScroll(e) {
        if (props.titleShowStyle == NaviBarTitleShowType.scrollToShow) {
            if (e.nativeEvent){
                const {contentOffset} = e.nativeEvent
                if (contentOffset.y > 70) {
                    setShowTitle(true)
                }
                else {
                    setShowTitle(false)
                }
            }
            else {
                if (e.detail.scrollTop > 70) {
                    setShowTitle(true)
                }
                else {
                    setShowTitle(false)
                }
            }
            
        }
        if (e.nativeEvent){
            const { contentSize, contentOffset, layoutMeasurement } = e.nativeEvent;
            const isAtTheBottom =
                contentSize.height - contentOffset.y <= layoutMeasurement.height;
            if (isAtTheBottom && props.more){
                props.more()
            }
        }
        

    }

    usePageScroll((e) => {
        if (props.titleShowStyle == NaviBarTitleShowType.scrollToShow) {
            if (e.scrollTop > 70) {
                setShowTitle(true)
            }
            else {
                setShowTitle(false)
            }
        }
    })

    function fastSleepTitle() {
        if (process.env.TARO_ENV == 'rn') {
            return <GradientText style={{
                fontSize: props.secondPage ? rpxToPx(56) : rpxToPx(72),
                fontWeight: 'bold',
                marginLeft: rpxToPx(46),
                marginTop: rpxToPx(24),
                marginBottom: rpxToPx(24)
            }}>{props.title}</GradientText>
        }
        return <Text className='layout_title fast_sleep_text'
            style={{
                fontSize: props.secondPage ? rpxToPx(56) : rpxToPx(72)
            }}
        >{props.title}</Text>
    }

    function pageDetail() {
        return <View>
            {
                props.title && <View className="layout_title_view" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
                    {
                        props.isFastSleepTheme ? fastSleepTitle() :
                            <Text className='layout_title'
                                style={{
                                    color: props.titleColor ? props.titleColor : '#fff',
                                    fontSize: props.secondPage ? rpxToPx(56) : rpxToPx(72)
                                }}
                            >{props.title}</Text>
                    }

                </View>
            }
            {
                children
            }
            <View style={{ height: 0 }} />
        </View>
    }


    switch (type) {
        case TemplateType.flex:
            return <View className='flex'>
                {/* <View className="flex-expand" /> */}
                {
                    process.env.TARO_ENV == 'weapp' ? pageDetail() :
                        <ScrollViewRN scrollEventThrottle={400} style={{ minHeight: Taro.getSystemInfoSync().screenHeight }} onScroll={onScroll} showsVerticalScrollIndicator={false}>
                            {
                                pageDetail()
                            }
                            <View style={{ height: 200 }} />
                        </ScrollViewRN>
                }
            </View>
        case TemplateType.customHeader:
            if (process.env.TARO_ENV == 'rn') {
                return <ScrollViewRN onScroll={onScroll}
                    ref={scrollRef}
                    scrollEventThrottle={400}
                    // scrollTop={scrollTop}
                    // scrollWithAnimation
                    style={{ minHeight: Taro.getSystemInfoSync().screenHeight }}
                    refreshControl={
                        props.showPullToRefresh ? <RefreshControl
                            tintColor='white'
                            colors={['white']} // 设置刷新指示器的颜色为白色
                            progressBackgroundColor="white" // 设置刷新指示器的背景颜色为白色
                            refreshing={isRefreshing}
                            onRefresh={onRefresh}
                        /> : null
                    }
                    showsVerticalScrollIndicator={false}>
                    <View className='flex'>
                        {
                            props.header
                        }
                        {children}
                        <View style={{ height: 200 }} />
                    </View>
                </ScrollViewRN>
            }
            return <View className='flex'>
                {/* <View className="flex-expand" /> */}
                {
                    props.header
                }
                {children}
                <View style={{ height: 50 }} />
            </View>
    }
    return <View />
}