taro/src/components/layout/layout.tsx

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

let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    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
}) {
    const { children, type, triggered } = props;
    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 : '' : '',
            });
        }

    }, [showTitle])

    function onScroll(e) {
        console.log('a')
        if (props.titleShowStyle == NaviBarTitleShowType.scrollToShow) {
            if (e.detail.scrollTop > 70) {
                setShowTitle(true)
            }
            else {
                setShowTitle(false)
            }
        }

    }

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

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

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


    switch (type) {
        case TemplateType.list:
            return <ScrollView className="layout_container"
                style={{ WebkitOverflowScrolling: 'auto' }}
                onScroll={onScroll}
                scrollY refresherEnabled={true}
                refresherThreshold={100} refresherBackground="#000"
                refresherDefaultStyle="white"
                onRefresherRefresh={() => { props.refresh!() }}
                upperThreshold={50}
                onScrollToLower={() => { props.more ? props.more() : null }}
                refresherTriggered={triggered}>
                {
                    props.title && <View className="layout_title_view" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
                        <Text className='layout_title'
                            style={{
                                color: props.titleColor ? props.titleColor : '#fff',
                                fontSize: props.secondPage ? 28 : 36
                            }}
                        >{props.title}</Text>
                    </View>
                }
                {children}
                <View style={{ height: 50 }} />
            </ScrollView>
        case TemplateType.grid:
            return <ScrollView className="layout_container"
                enableFlex={true}
                onScroll={onScroll}
                style={{ WebkitOverflowScrolling: 'auto' }}
                scrollY refresherEnabled={true}
                refresherThreshold={100} refresherBackground="#000"
                refresherDefaultStyle="white"
                onRefresherRefresh={() => { props.refresh!() }}
                upperThreshold={50}
                onScrollToLower={() => { props.more ? props.more() : null }}
                refresherTriggered={triggered}>
                {
                    props.title && <View className="layout_title_view" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
                        <Text className='layout_title'
                            style={{
                                color: props.titleColor ? props.titleColor : '#fff',
                                fontSize: props.secondPage ? 28 : 36
                            }}
                        >{props.title}</Text>
                    </View>
                }
                <View className="grid_bg">
                    {children}
                    <View style={{ height: 50 }} />
                </View>
            </ScrollView>
        case TemplateType.flex:
            return <View className='flex'>
                {/* <View className="flex-expand" /> */}
                {
                    process.env.TARO_ENV == 'weapp' ? pageDetail() :
                        <ScrollView onScroll={onScroll}>
                            {
                                pageDetail()
                            }
                        </ScrollView>
                }
            </View>
        case TemplateType.customHeader:
            return <View className='flex'>
                {/* <View className="flex-expand" /> */}
                {
                    props.header
                }
                {children}
                <View style={{ height: 50 }} />
            </View>
    }
    return <View />
}