xref: /MusicFree/src/components/base/loading.tsx (revision 5589cdf32b2bb0f641e5ac7bf1f6152cd6b9b70e)
119dc08ecS猫头猫import React from 'react';
2*5589cdf3S猫头猫import {ActivityIndicator, StyleSheet, View} from 'react-native';
319dc08ecS猫头猫import rpx from '@/utils/rpx';
419dc08ecS猫头猫import ThemeText from './themeText';
5e650bfb3S猫头猫import useColors from '@/hooks/useColors';
619dc08ecS猫头猫
7806b2764S猫头猫interface ILoadingProps {
8806b2764S猫头猫    text?: string;
9f9afcc0dS猫头猫    showText?: boolean;
10f9afcc0dS猫头猫    height?: number;
118d82ecd9S猫头猫    color?: string;
12806b2764S猫头猫}
13806b2764S猫头猫export default function Loading(props: ILoadingProps) {
14e650bfb3S猫头猫    const colors = useColors();
158d82ecd9S猫头猫    const {showText = true, height, text, color} = props;
1619dc08ecS猫头猫
1719dc08ecS猫头猫    return (
18f9afcc0dS猫头猫        <View style={[style.wrapper, {height}]}>
198d82ecd9S猫头猫            <ActivityIndicator animating color={color ?? colors.text} />
20f9afcc0dS猫头猫            {showText ? (
214060c00aS猫头猫                <ThemeText
228d82ecd9S猫头猫                    color={color}
234060c00aS猫头猫                    fontSize="title"
244060c00aS猫头猫                    fontWeight="semibold"
254060c00aS猫头猫                    style={style.text}>
26f9afcc0dS猫头猫                    {text ?? '加载中...'}
274060c00aS猫头猫                </ThemeText>
28f9afcc0dS猫头猫            ) : null}
2919dc08ecS猫头猫        </View>
3019dc08ecS猫头猫    );
3119dc08ecS猫头猫}
3219dc08ecS猫头猫
3319dc08ecS猫头猫const style = StyleSheet.create({
3419dc08ecS猫头猫    wrapper: {
3519dc08ecS猫头猫        width: '100%',
3619dc08ecS猫头猫        flex: 1,
3719dc08ecS猫头猫        justifyContent: 'center',
3819dc08ecS猫头猫        alignItems: 'center',
3919dc08ecS猫头猫    },
4019dc08ecS猫头猫    text: {
4119dc08ecS猫头猫        marginTop: rpx(48),
4219dc08ecS猫头猫    },
4319dc08ecS猫头猫});
44