feat: 轮播图

app/(tabs)/owner.tsx

@@ -92,7 +92,9 @@ export default function OwnerPage() {
                             <ComeinSvg width={24} height={24} />
                         </View>
                         {/* 分类 */}
-                        <CarouselComponent data={userInfoDetails?.material_counter} />
+                        <View style={{ marginHorizontal: -16 }}>
+                            <CarouselComponent data={userInfoDetails?.material_counter} />
+                        </View>
 
                         {/* 作品数据 */}
                         <View className='flex flex-row justify-between gap-[1rem]'>

components/owner/carousel.tsx

@@ -3,10 +3,7 @@ import UserinfoTotalSvg from "@/assets/icons/svg/userinfoTotal.svg";
 import { Counter, UserCountData } from "@/types/user";
 import * as React from "react";
 import { Dimensions, StyleSheet, View, ViewStyle } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
+import Carousel from "react-native-reanimated-carousel";
-import Carousel, {
-    ICarouselInstance
-} from "react-native-reanimated-carousel";
 import { ThemedText } from "../ThemedText";
 import { formatDuration } from "../utils/time";
 import CategoryComponent from "./category";
@@ -23,9 +20,6 @@ const width = Dimensions.get("window").width;
 
 function CarouselComponent(props: Props) {
     const { data } = props;
-
-    const ref = React.useRef<ICarouselInstance>(null);
-    const progress = useSharedValue<number>(0);
     const [carouselDataValue, setCarouselDataValue] = React.useState<CarouselData[]>([]);
     const dataHandle = () => {
         const carouselData = { ...data?.category_count, total_count: data?.total_count }
@@ -56,8 +50,8 @@ function CarouselComponent(props: Props) {
                 </View>
             ))}
             <View style={styles.image}>
-                <UserinfoTotalSvg />
+                <UserinfoTotalSvg width={width * 0.8} />
-                <View style={{ position: 'absolute', bottom: -5, right: 0, left: 0, justifyContent: 'center', alignItems: 'center' }}><HandersSvg /></View>
+                <View style={{ position: 'absolute', bottom: 5, right: 0, left: 0, justifyContent: 'center', alignItems: 'center' }}><HandersSvg /></View>
             </View>
         </View>
     }
@@ -69,27 +63,30 @@ function CarouselComponent(props: Props) {
     }, [data]);
 
     return (
-        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginVertical: -24, marginBottom: -40 }}>
+        <View style={{ flex: 1 }}>
             <Carousel
-                ref={ref}
+                width={width}
-                width={width * 0.8}
+                height={width * 0.75}
-                height={width * 0.8}
                 data={carouselDataValue || []}
                 mode="parallax"
-                onProgressChange={progress}
                 defaultIndex={carouselDataValue?.findIndex((item) => item?.key === 'total_count') - 1 || 0}
+                modeConfig={{
+                    parallaxScrollingScale: 1,
+                    parallaxScrollingOffset: 180,
+                    parallaxAdjacentItemScale: 0.7
+                }}
                 renderItem={({ item, index }) => {
                     const style: ViewStyle = {
-                        marginHorizontal: 10,
+                        width: width,
-                        width: '92%',
+                        height: width * 0.8,
-                        height: '92%',
+                        alignItems: "center",
                     };
                     return (
                         <View key={index} style={style}>
                             {item?.key === 'total_count' ? (
                                 totleItem(item.value)
                             ) : (
-                                <View style={{ flex: 1 }}>
+                                <View style={{ flex: 1, width: width * 0.65 }}>
                                     {CategoryComponent({
                                         title: item?.key,
                                         data: [
@@ -116,12 +113,13 @@ const styles = StyleSheet.create({
         borderRadius: 16,
         display: "flex",
         flexDirection: "column",
-        height: '100%',
         position: 'relative',
+        width: width * 0.6,
+        height: '85%'
     },
     image: {
         position: 'absolute',
-        bottom: 0,
+        bottom: -10,
         right: 0,
         left: 0,
         width: '100%',

components/owner/ranking.tsx

@@ -27,7 +27,7 @@ const Ranking = ({ data }: { data: TitleRankings[] }) => {
                 renderItem={({ item }) => (
                     <View style={styles.item}>
                         <ThemedText style={styles.rank}>No.{item.ranking}</ThemedText>
-                        <ThemedText style={[styles.title, { color: "#FFB645" }]}>{item.display_name}</ThemedText>
+                        <ThemedText style={[styles.title]}>{item.display_name}</ThemedText>
                         <ThemedText style={styles.title}>{item.region}</ThemedText>
                     </View>
                 )}

components/owner/userName.tsx

@@ -57,7 +57,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
                         </ScrollView>
                         <View className='flex flex-row items-center gap-2 border border-bgPrimary px-2 py-1 rounded-full'>
                             <StarSvg />
-                            <ThemedText style={{ color: 'bgPrimary', fontSize: 14, fontWeight: '700' }}>3290</ThemedText>
+                            <ThemedText style={{ color: 'bgPrimary', fontSize: 14, fontWeight: '700' }}>{userInfo?.remain_points}</ThemedText>
                         </View>
                     </View>
                 </View>