FairClip/memowake-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 轮播图

Browse Source
This commit is contained in:
jinyaqiu 2025-07-22 14:32:44 +08:00
parent bc73f5c52c
commit 817b1dd8a0
4 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/(tabs)/owner.tsx
View File

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

38
components/owner/carousel.tsx
View File

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

2
components/owner/ranking.tsx
View File

@ -27,7 +27,7 @@ const Ranking = ({ data }: { data: TitleRankings[] }) => {
renderItem={({ item }) => ( renderItem={({ item }) => (
<View style={styles.item}> <View style={styles.item}>
<ThemedText style={styles.rank}>No.{item.ranking}</ThemedText> <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> <ThemedText style={styles.title}>{item.region}</ThemedText>
</View> </View>
)} )}

2
components/owner/userName.tsx
View File

@ -57,7 +57,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
</ScrollView> </ScrollView>
<View className='flex flex-row items-center gap-2 border border-bgPrimary px-2 py-1 rounded-full'> <View className='flex flex-row items-center gap-2 border border-bgPrimary px-2 py-1 rounded-full'>
<StarSvg /> <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> </View>
</View> </View>