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-08-07 16:40:50 +08:00
parent 487f0a773d
commit b0eb244146
3 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,13 +13,14 @@ import { CountData, UserInfoDetails } from '@/types/user';
import { useFocusEffect, useRouter } from 'expo-router'; import { useFocusEffect, useRouter } from 'expo-router';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FlatList, StyleSheet, View } from 'react-native'; import { Dimensions, FlatList, StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function OwnerPage() { export default function OwnerPage() {
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const { t } = useTranslation(); const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const width = Dimensions.get("window").width;
// 添加页面挂载状态 // 添加页面挂载状态
const [isMounted, setIsMounted] = useState(false); const [isMounted, setIsMounted] = useState(false);
@ -122,7 +123,7 @@ export default function OwnerPage() {
<MemberCard pro={userInfoDetails?.membership_level} points={userInfoDetails?.remain_points} /> <MemberCard pro={userInfoDetails?.membership_level} points={userInfoDetails?.remain_points} />
{/* 分类 */} {/* 分类 */}
<View style={{ marginHorizontal: -16, marginBottom: -16 }}> <View style={{ marginHorizontal: -16, marginBottom: -width * 0.26 }}>
<CarouselComponent data={userInfoDetails?.material_counter} /> <CarouselComponent data={userInfoDetails?.material_counter} />
</View> </View>

10
components/owner/carousel.tsx
View File

@ -75,7 +75,7 @@ function CarouselComponent(props: Props) {
}}> }}>
<Carousel <Carousel
width={width} width={width}
height={width * 0.75} height={width}
data={carouselDataValue || []} data={carouselDataValue || []}
mode="parallax" mode="parallax"
onSnapToItem={(index) => setCurrentIndex(index)} onSnapToItem={(index) => setCurrentIndex(index)}
@ -89,16 +89,14 @@ function CarouselComponent(props: Props) {
} }
modeConfig={{ modeConfig={{
parallaxScrollingScale: 1, parallaxScrollingScale: 1,
parallaxScrollingOffset: 140, parallaxScrollingOffset: 130,
parallaxAdjacentItemScale: 0.7 parallaxAdjacentItemScale: 0.7
}} }}
renderItem={({ item, index }) => { renderItem={({ item, index }) => {
const isActive = index === currentIndex;
const style: ViewStyle = { const style: ViewStyle = {
width: width, width: width,
height: width * 0.8, height: width * 0.7,
alignItems: "center", alignItems: "center"
// paddingTop: isActive && item?.key === 'total_count' ? 0 : 40
}; };
return ( return (
<View key={index} style={[style]}> <View key={index} style={[style]}>

8
components/owner/category.tsx
View File

@ -44,7 +44,7 @@ const CategoryComponent = ({ title, data, bgSvg, style, width }: CategoryProps)
}; };
return ( return (
<View style={[styles.container, style, { width: width * 0.7 }]}> <View style={[styles.container, style, { width: width * 0.73 }]}>
<View style={styles.backgroundContainer}> <View style={styles.backgroundContainer}>
<Image <Image
source={bgSvg !== "" && bgSvg !== null ? { uri: bgSvg } : require('@/assets/images/png/owner/people.png')} source={bgSvg !== "" && bgSvg !== null ? { uri: bgSvg } : require('@/assets/images/png/owner/people.png')}
@ -67,7 +67,7 @@ const CategoryComponent = ({ title, data, bgSvg, style, width }: CategoryProps)
</View> </View>
<ThemedText style={styles.itemTitle}>{item.title}</ThemedText> <ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
</View> </View>
<View style={{ alignSelf: 'flex-start', flex: 1, width: 100 }}> <View style={{ alignSelf: 'flex-start', flex: 1 }}>
{item?.title === "Length" ? ( {item?.title === "Length" ? (
typeof item.number === 'object' ? ( typeof item.number === 'object' ? (
renderTimeDisplay(item.number) renderTimeDisplay(item.number)
@ -110,6 +110,7 @@ const styles = StyleSheet.create({
}, },
content: { content: {
padding: 32, padding: 32,
paddingRight: 16,
justifyContent: "space-between", justifyContent: "space-between",
flex: 1 flex: 1
}, },
@ -136,7 +137,7 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingVertical: 8, paddingVertical: 16,
width: '100%', width: '100%',
}, },
itemTitle: { itemTitle: {
@ -152,7 +153,6 @@ const styles = StyleSheet.create({
lineHeight: 30, lineHeight: 30,
fontWeight: '700', fontWeight: '700',
textAlign: 'left', textAlign: 'left',
marginLeft: 8,
flex: 1, flex: 1,
} }
}); });