Mac
1 month ago
19 changed files with 1369 additions and 809 deletions
@ -0,0 +1,13 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import Svg, { Path } from 'react-native-svg'; |
||||||
|
|
||||||
|
const TiktokIcon = ({color,size}:{color:string,size:number}) => ( |
||||||
|
<Svg width={size} height={size} viewBox="0 0 22 22" fill="none"> |
||||||
|
<Path |
||||||
|
d="M17.4167 9.53425C16.0839 9.53425 14.7492 9.11533 13.6676 8.27842V13.9737C13.6676 16.8208 11.4997 19.25 8.66625 19.25C5.83283 19.25 3.66675 16.9052 3.66675 13.9737C3.66675 11.0422 5.83375 8.69642 8.66716 8.69642C8.9165 8.69642 9.25016 8.69642 9.50041 8.78075V11.7957C9.25016 11.7122 8.99991 11.6279 8.66625 11.6279C7.41683 11.6279 6.50016 12.7169 6.50016 13.8893C6.50016 15.2295 7.49933 16.1508 8.66716 16.1508C9.83316 16.1508 10.8332 15.0618 10.8332 13.8893V2.75H13.5832C13.5832 4.928 15.2497 6.68617 17.2499 6.68617L17.4167 9.53425Z" |
||||||
|
fill={color} |
||||||
|
/> |
||||||
|
</Svg> |
||||||
|
); |
||||||
|
|
||||||
|
export default TiktokIcon; |
||||||
@ -1,71 +1,162 @@ |
|||||||
import React, { useState } from 'react'; |
import React, { useState } from 'react'; |
||||||
import { View, Text, StyleSheet, Button, Modal, TouchableOpacity, Dimensions } from 'react-native'; |
import { |
||||||
|
View, |
||||||
|
Text, |
||||||
|
FlatList, |
||||||
|
TouchableOpacity, |
||||||
|
StyleSheet, |
||||||
|
Image, |
||||||
|
Dimensions, |
||||||
|
ListRenderItem, |
||||||
|
} from 'react-native'; |
||||||
|
import fontSize from '../utils/fontsizeUtils'; |
||||||
|
import widthUtils from '../utils/widthUtils'; |
||||||
|
|
||||||
export const CategoryScreen = () => { |
type Category = { |
||||||
const [isModalVisible, setIsModalVisible] = useState(false); |
id: string; |
||||||
|
name: string; |
||||||
|
}; |
||||||
|
|
||||||
const toggleModal = () => { |
type Product = { |
||||||
setIsModalVisible(!isModalVisible); |
name: string; |
||||||
}; |
img: string; |
||||||
|
}; |
||||||
|
|
||||||
return ( |
const categories: Category[] = [ |
||||||
<View style={styles.container}> |
{ id: 'fruit', name: '水果' }, |
||||||
<Button title="Category Screen" onPress={toggleModal} /> |
{ id: 'snacks', name: '零食' }, |
||||||
|
{ id: 'clothes', name: '服饰' }, |
||||||
|
{ id: 'home', name: '家居' }, |
||||||
|
]; |
||||||
|
|
||||||
<Modal |
const productsData: Record<string, Product[]> = { |
||||||
visible={isModalVisible} |
fruit: [ |
||||||
transparent={true} |
{ name: '苹果', img: 'https://via.placeholder.com/100?text=苹果' }, |
||||||
animationType="slide" |
{ name: '香蕉', img: 'https://via.placeholder.com/100?text=香蕉' }, |
||||||
onRequestClose={toggleModal} |
{ name: '西瓜', img: 'https://via.placeholder.com/100?text=西瓜' }, |
||||||
> |
], |
||||||
|
snacks: [ |
||||||
|
{ name: '薯片', img: 'https://via.placeholder.com/100?text=薯片' }, |
||||||
|
{ name: '饼干', img: 'https://via.placeholder.com/100?text=饼干' }, |
||||||
|
{ name: '巧克力', img: 'https://via.placeholder.com/100?text=巧克力' }, |
||||||
|
], |
||||||
|
clothes: [ |
||||||
|
{ name: 'T恤', img: 'https://via.placeholder.com/100?text=T恤' }, |
||||||
|
{ name: '牛仔裤', img: 'https://via.placeholder.com/100?text=牛仔裤' }, |
||||||
|
{ name: '外套', img: 'https://via.placeholder.com/100?text=外套' }, |
||||||
|
], |
||||||
|
home: [ |
||||||
|
{ name: '毛巾fdfd一定要人盯人一天的玉兔捣药', img: 'https://via.placeholder.com/100?text=毛巾' }, |
||||||
|
{ name: '椅子', img: 'https://via.placeholder.com/100?text=椅子' }, |
||||||
|
{ name: '灯具', img: 'https://via.placeholder.com/100?text=灯具' }, |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
|
export function CategoryScreen() { |
||||||
|
const [activeCategory, setActiveCategory] = useState<string>('fruit'); |
||||||
|
|
||||||
|
const renderCategoryItem: ListRenderItem<Category> = ({ item }) => ( |
||||||
<TouchableOpacity |
<TouchableOpacity |
||||||
style={styles.modalOverlay}
|
style={[ |
||||||
activeOpacity={1}
|
styles.menuItem, |
||||||
onPress={toggleModal} |
item.id === activeCategory && styles.menuItemActive, |
||||||
|
]} |
||||||
|
onPress={() => setActiveCategory(item.id)} |
||||||
|
> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
styles.menuText, |
||||||
|
item.id === activeCategory && styles.menuTextActive, |
||||||
|
]} |
||||||
|
numberOfLines={1} |
||||||
|
ellipsizeMode="tail" |
||||||
> |
> |
||||||
<View style={styles.modalContent}> |
{item.name} |
||||||
<View style={styles.modalHeader}> |
</Text> |
||||||
<View style={styles.modalHandle} /> |
</TouchableOpacity> |
||||||
|
); |
||||||
|
|
||||||
|
const renderProductItem: ListRenderItem<Product> = ({ item }) => ( |
||||||
|
<View style={styles.productCard}> |
||||||
|
<Image source={{ uri: item.img }} style={styles.productImage} /> |
||||||
|
<Text style={styles.productName} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text> |
||||||
</View> |
</View> |
||||||
{/* 这里可以添加模态框的内容 */} |
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
<View style={styles.leftMenu}> |
||||||
|
<FlatList |
||||||
|
data={categories} |
||||||
|
renderItem={renderCategoryItem} |
||||||
|
keyExtractor={(item) => item.id} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
<View style={styles.rightContent}> |
||||||
|
<FlatList |
||||||
|
data={productsData[activeCategory]} |
||||||
|
renderItem={renderProductItem} |
||||||
|
keyExtractor={(_, index) => `${activeCategory}-${index}`} |
||||||
|
numColumns={3} |
||||||
|
contentContainerStyle={styles.productGrid} |
||||||
|
/> |
||||||
</View> |
</View> |
||||||
</TouchableOpacity> |
|
||||||
</Modal> |
|
||||||
</View> |
</View> |
||||||
); |
); |
||||||
}; |
} |
||||||
|
|
||||||
const styles = StyleSheet.create({ |
const styles = StyleSheet.create({ |
||||||
container: { |
container: { |
||||||
flex: 1, |
flex: 1, |
||||||
justifyContent: 'center', |
flexDirection: 'row', |
||||||
alignItems: 'center', |
}, |
||||||
|
leftMenu: { |
||||||
|
width: widthUtils(100,100).width, |
||||||
backgroundColor: '#fff', |
backgroundColor: '#fff', |
||||||
|
borderRightWidth: 1, |
||||||
|
borderColor: '#eee', |
||||||
}, |
}, |
||||||
text: { |
menuItem: { |
||||||
fontSize: 20, |
paddingVertical: 16, |
||||||
|
alignItems: 'center', |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderColor: '#f0f0f0', |
||||||
|
}, |
||||||
|
menuItemActive: { |
||||||
|
backgroundColor: '#f5f5f5', |
||||||
|
}, |
||||||
|
menuText: { |
||||||
|
fontSize: fontSize(14), |
||||||
color: '#333', |
color: '#333', |
||||||
}, |
}, |
||||||
modalOverlay: { |
menuTextActive: { |
||||||
|
color: '#e60012', |
||||||
|
fontWeight: 'bold', |
||||||
|
}, |
||||||
|
rightContent: { |
||||||
flex: 1, |
flex: 1, |
||||||
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
backgroundColor: '#f8f8f8', |
||||||
justifyContent: 'flex-end', |
paddingHorizontal: 10, |
||||||
|
paddingTop: 12, |
||||||
}, |
}, |
||||||
modalContent: { |
productGrid: { |
||||||
height: '70%', |
paddingBottom: 20, |
||||||
backgroundColor: 'white', |
|
||||||
borderTopLeftRadius: 20, |
|
||||||
borderTopRightRadius: 20, |
|
||||||
padding: 20, |
|
||||||
}, |
}, |
||||||
modalHeader: { |
productCard: { |
||||||
|
flexBasis: '33.33%', |
||||||
|
padding: 6, |
||||||
alignItems: 'center', |
alignItems: 'center', |
||||||
paddingBottom: 10, |
|
||||||
}, |
}, |
||||||
modalHandle: { |
productImage: { |
||||||
width: 40, |
width: '100%', |
||||||
height: 4, |
aspectRatio: 1, |
||||||
backgroundColor: '#ccc', |
borderRadius: 6, |
||||||
borderRadius: 2, |
backgroundColor: '#eee', |
||||||
|
}, |
||||||
|
productName: { |
||||||
|
fontSize: fontSize(13), |
||||||
|
color: '#333', |
||||||
|
marginTop: 6, |
||||||
|
textAlign: 'center', |
||||||
}, |
}, |
||||||
}); |
}); |
||||||
@ -0,0 +1,290 @@ |
|||||||
|
import { |
||||||
|
View, |
||||||
|
Text, |
||||||
|
StyleSheet, |
||||||
|
ImageBackground, |
||||||
|
Dimensions, |
||||||
|
ScrollView, |
||||||
|
} from "react-native"; |
||||||
|
import BackIcon from "../../components/BackIcon"; |
||||||
|
import fontSize from "../../utils/fontsizeUtils"; |
||||||
|
import TiktokIcon from "../../components/TiktokIcon"; |
||||||
|
import widthUtils from "../../utils/widthUtils"; |
||||||
|
import Carousel from "react-native-reanimated-carousel"; |
||||||
|
import { useState } from "react"; |
||||||
|
export const TikTokScreen = () => { |
||||||
|
const { width: screenWidth } = Dimensions.get("window"); |
||||||
|
const [currentIndex, setCurrentIndex] = useState(0); |
||||||
|
const carouselItems = [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
image: require("../../../assets/img/Mask group.png"), |
||||||
|
liveText: "视频", |
||||||
|
subTitle: "LIVE", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
image: require("../../../assets/img/Mask group (1).png"), |
||||||
|
liveText: "LIVE", |
||||||
|
subTitle: "SHORTS", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const renderItem = ({ item }: { item: (typeof carouselItems)[0] }) => { |
||||||
|
return ( |
||||||
|
<View style={styles.maskGroup}> |
||||||
|
<ImageBackground |
||||||
|
source={item.image} |
||||||
|
style={styles.maskGroupImage} |
||||||
|
resizeMode="contain" |
||||||
|
> |
||||||
|
<View style={styles.content}> |
||||||
|
<View style={styles.titleContainer}> |
||||||
|
<View style={styles.titleLogo}> |
||||||
|
<TiktokIcon color="#fff" size={22} /> |
||||||
|
<Text style={styles.tikTokText}>TikTok</Text> |
||||||
|
<Text style={styles.LiveText}>{item.liveText}</Text> |
||||||
|
</View> |
||||||
|
<View style={styles.titleText}> |
||||||
|
<Text style={styles.titleTextTitle}>Section</Text> |
||||||
|
<Text style={styles.titleTextSubTitle}>{item.subTitle}</Text> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
</ImageBackground> |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const onSnapToItem = (index: number) => { |
||||||
|
setCurrentIndex(index); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
<View style={styles.header}> |
||||||
|
<BackIcon color="#fff" /> |
||||||
|
<Text style={styles.title}>店里 tiktok</Text> |
||||||
|
</View> |
||||||
|
|
||||||
|
<View style={styles.maskGroup}> |
||||||
|
<Carousel |
||||||
|
data={carouselItems} |
||||||
|
renderItem={renderItem} |
||||||
|
width={screenWidth} |
||||||
|
loop={true} |
||||||
|
autoPlayInterval={3000} |
||||||
|
onSnapToItem={onSnapToItem} |
||||||
|
/> |
||||||
|
|
||||||
|
<View |
||||||
|
style={[styles.Instruction, { top: widthUtils(210, 210).height }]} |
||||||
|
> |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
styles.instructionLine1, |
||||||
|
currentIndex === 0 && styles.instructionLine3, |
||||||
|
]} |
||||||
|
/> |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
styles.instructionLine2, |
||||||
|
currentIndex === 1 && styles.instructionLine3, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
|
||||||
|
<ScrollView |
||||||
|
style={styles.productContainer} |
||||||
|
showsVerticalScrollIndicator={false} |
||||||
|
> |
||||||
|
<View style={styles.productList}> |
||||||
|
<View style={styles.productItem}> |
||||||
|
<View style={styles.productItemImage}></View> |
||||||
|
<View style={styles.productItemInfo}> |
||||||
|
<View style={styles.priceInfo}></View> |
||||||
|
<View style={styles.priceTitle}> |
||||||
|
<Text
|
||||||
|
style={styles.priceTitleText} |
||||||
|
numberOfLines={2} |
||||||
|
ellipsizeMode="tail" |
||||||
|
>1231231131231231221323123123123123123123123121231231212311232</Text> |
||||||
|
</View> |
||||||
|
<View style={styles.ventes}></View> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
|
||||||
|
</View> |
||||||
|
</ScrollView> |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
header: { |
||||||
|
width: "100%", |
||||||
|
padding: 19, |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "center", |
||||||
|
position: "absolute", |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
zIndex: 1, |
||||||
|
}, |
||||||
|
title: { |
||||||
|
color: "#fff", |
||||||
|
fontSize: fontSize(22), |
||||||
|
fontWeight: "700", |
||||||
|
textAlign: "center", |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
maskGroup: { |
||||||
|
width: "100%", |
||||||
|
height: widthUtils(321, 321).height, |
||||||
|
backgroundColor: "#000", |
||||||
|
position: "relative", |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
}, |
||||||
|
maskGroupImage: { |
||||||
|
width: "100%", |
||||||
|
height: "100%", |
||||||
|
resizeMode: "contain", |
||||||
|
}, |
||||||
|
content: { |
||||||
|
width: "100%", |
||||||
|
flex: 1, |
||||||
|
justifyContent: "center", |
||||||
|
}, |
||||||
|
titleContainer: { |
||||||
|
width: "100%", |
||||||
|
alignItems: "center", |
||||||
|
}, |
||||||
|
titleLogo: { |
||||||
|
width: "100%", |
||||||
|
paddingLeft: 22, |
||||||
|
paddingRight: 22, |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
}, |
||||||
|
tikTokText: { |
||||||
|
color: "#fff", |
||||||
|
fontSize: fontSize(26), |
||||||
|
fontWeight: "600", |
||||||
|
}, |
||||||
|
LiveText: { |
||||||
|
marginLeft: 5, |
||||||
|
backgroundColor: "#ff188a", |
||||||
|
paddingLeft: 5, |
||||||
|
paddingRight: 5, |
||||||
|
fontSize: fontSize(16), |
||||||
|
fontWeight: "600", |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
titleText: { |
||||||
|
width: "100%", |
||||||
|
paddingTop: widthUtils(19, 19).height, |
||||||
|
paddingBottom: widthUtils(19, 19).height, |
||||||
|
paddingLeft: widthUtils(22, 22).height, |
||||||
|
paddingRight: widthUtils(22, 22).height, |
||||||
|
}, |
||||||
|
Instruction: { |
||||||
|
width: "100%", |
||||||
|
paddingTop: widthUtils(19, 19).height, |
||||||
|
paddingBottom: widthUtils(19, 19).height, |
||||||
|
paddingLeft: widthUtils(22, 22).height, |
||||||
|
paddingRight: widthUtils(22, 22).height, |
||||||
|
flexDirection: "row", |
||||||
|
gap: 6, |
||||||
|
position: "absolute", |
||||||
|
bottom: widthUtils(50, 50).height, |
||||||
|
left: 0, |
||||||
|
zIndex: 2, |
||||||
|
}, |
||||||
|
instructionLine1: { |
||||||
|
width: 10, |
||||||
|
height: 6, |
||||||
|
backgroundColor: "#52595f", |
||||||
|
borderRadius: 10, |
||||||
|
}, |
||||||
|
instructionLine2: { |
||||||
|
width: 10, |
||||||
|
height: 6, |
||||||
|
backgroundColor: "#52595f", |
||||||
|
borderRadius: 10, |
||||||
|
}, |
||||||
|
instructionLine3: { |
||||||
|
width: 20, |
||||||
|
height: 6, |
||||||
|
backgroundColor: "#ffff", |
||||||
|
borderRadius: 10, |
||||||
|
}, |
||||||
|
titleTextTitle: { |
||||||
|
color: "#fff", |
||||||
|
fontSize: fontSize(26), |
||||||
|
fontWeight: "900", |
||||||
|
fontFamily: "Montserrat-Bold", |
||||||
|
}, |
||||||
|
titleTextSubTitle: { |
||||||
|
color: "#fff", |
||||||
|
fontSize: fontSize(30), |
||||||
|
fontWeight: "900", |
||||||
|
fontFamily: "Montserrat-Bold", |
||||||
|
}, |
||||||
|
productContainer: { |
||||||
|
flex: 1, |
||||||
|
width: "100%", |
||||||
|
position: "absolute", |
||||||
|
top: widthUtils(321, 321).height, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
bottom: 0, |
||||||
|
zIndex: 1, |
||||||
|
backgroundColor: "#000", |
||||||
|
marginTop: -10, |
||||||
|
paddingLeft: 19, |
||||||
|
paddingRight: 19, |
||||||
|
}, |
||||||
|
productList: { |
||||||
|
width: "100%", |
||||||
|
flexDirection: "row", |
||||||
|
flexWrap: "wrap", |
||||||
|
gap: 10, |
||||||
|
}, |
||||||
|
productItem: { |
||||||
|
width: "48%", |
||||||
|
height: widthUtils(298, 298).height, |
||||||
|
borderRadius: 10, |
||||||
|
}, |
||||||
|
productItemImage:{ |
||||||
|
width: "100%", |
||||||
|
height:widthUtils(190, 190).height, |
||||||
|
borderRadius: 10, |
||||||
|
}, |
||||||
|
productItemInfo:{ |
||||||
|
width: "100%", |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
priceInfo:{ |
||||||
|
width: "100%", |
||||||
|
padding: 10, |
||||||
|
}, |
||||||
|
priceTitle: { |
||||||
|
width: "100%", |
||||||
|
padding: 10, |
||||||
|
}, |
||||||
|
priceTitleText: { |
||||||
|
color: "#fff", |
||||||
|
fontSize: fontSize(14), |
||||||
|
lineHeight: fontSize(20), |
||||||
|
}, |
||||||
|
ventes:{ |
||||||
|
width: "100%", |
||||||
|
padding: 10, |
||||||
|
} |
||||||
|
}); |
||||||
@ -0,0 +1,199 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { |
||||||
|
View, |
||||||
|
Text, |
||||||
|
FlatList, |
||||||
|
Image, |
||||||
|
TouchableOpacity, |
||||||
|
Platform, |
||||||
|
StyleSheet, |
||||||
|
} from "react-native"; |
||||||
|
import BackIcon from "../../components/BackIcon"; |
||||||
|
import fontSize from "../../utils/fontsizeUtils"; |
||||||
|
import { useNavigation } from "@react-navigation/native"; |
||||||
|
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker'; |
||||||
|
import widthUtils from "../../utils/widthUtils"; |
||||||
|
|
||||||
|
const browseData = [ |
||||||
|
{ |
||||||
|
id: "1", |
||||||
|
name: "商品名称示例", |
||||||
|
time: "14:32", |
||||||
|
price: 199.0, |
||||||
|
image: "https://via.placeholder.com/60", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "2", |
||||||
|
name: "另一商品示例", |
||||||
|
time: "09:15", |
||||||
|
price: 89.9, |
||||||
|
image: "https://via.placeholder.com/60", |
||||||
|
}, |
||||||
|
|
||||||
|
]; |
||||||
|
|
||||||
|
export function BrowseHistoryScreen() { |
||||||
|
const navigation = useNavigation(); |
||||||
|
const [date, setDate] = useState(new Date()); |
||||||
|
|
||||||
|
const [show, setShow] = useState(false); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const onChange = (event: DateTimePickerEvent, selectedDate?: Date) => { |
||||||
|
setShow(Platform.OS === "ios"); // iOS 会保持显示
|
||||||
|
if (selectedDate) { |
||||||
|
setDate(selectedDate); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
<View style={styles.header}> |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => navigation.goBack()} |
||||||
|
style={styles.backButton} |
||||||
|
> |
||||||
|
<BackIcon size={fontSize(22)} /> |
||||||
|
</TouchableOpacity> |
||||||
|
<Text style={styles.title}>浏览历史</Text> |
||||||
|
<View style={styles.placeholder} /> |
||||||
|
</View> |
||||||
|
|
||||||
|
<TouchableOpacity |
||||||
|
style={styles.dateInput} |
||||||
|
onPress={() => setShow(true)} |
||||||
|
> |
||||||
|
<Text style={styles.dateText}>筛选浏览记录</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
|
||||||
|
{show && ( |
||||||
|
<DateTimePicker |
||||||
|
value={date} |
||||||
|
mode="date" |
||||||
|
is24Hour={true} |
||||||
|
display="default" |
||||||
|
onChange={onChange} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<FlatList |
||||||
|
data={browseData} |
||||||
|
keyExtractor={(item) => item.id} |
||||||
|
contentContainerStyle={styles.list} |
||||||
|
renderItem={({ item }) => ( |
||||||
|
<View style={styles.item}> |
||||||
|
<Image source={{ uri: item.image }} style={styles.image} /> |
||||||
|
<View style={styles.info}> |
||||||
|
<View style={styles.row}> |
||||||
|
<Text style={styles.name}>{item.name}</Text> |
||||||
|
<Text style={styles.price}>¥{item.price.toFixed(2)}</Text> |
||||||
|
</View> |
||||||
|
<Text style={styles.time}>浏览时间：{item.time}</Text> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
)} |
||||||
|
ListEmptyComponent={ |
||||||
|
<Text style={styles.empty}>当前日期没有浏览记录</Text> |
||||||
|
} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
backgroundColor: "#f8f8f8", |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
header: { |
||||||
|
paddingInline: 19, |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "space-between", |
||||||
|
backgroundColor: "white", |
||||||
|
width: "100%", |
||||||
|
paddingVertical: 15, |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderBottomColor: "#e9ecef", |
||||||
|
shadowColor: "#000", |
||||||
|
shadowOffset: { width: 0, height: 2 }, |
||||||
|
shadowOpacity: 0.1, |
||||||
|
shadowRadius: 4, |
||||||
|
elevation: 3, |
||||||
|
}, |
||||||
|
backButton: { |
||||||
|
width: widthUtils(24,24).width, |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: fontSize(20), |
||||||
|
fontWeight: "600", |
||||||
|
flex: 1, |
||||||
|
textAlign: "center", |
||||||
|
}, |
||||||
|
placeholder: { |
||||||
|
width: widthUtils(24,24).width, |
||||||
|
}, |
||||||
|
|
||||||
|
dateInput: { |
||||||
|
padding: 20, |
||||||
|
backgroundColor: "#fff", |
||||||
|
marginBottom: 16, |
||||||
|
}, |
||||||
|
dateText: { |
||||||
|
fontSize: 16, |
||||||
|
color: "#333", |
||||||
|
}, |
||||||
|
list: { |
||||||
|
gap: 12, |
||||||
|
paddingHorizontal: 20, |
||||||
|
}, |
||||||
|
item: { |
||||||
|
flexDirection: "row", |
||||||
|
backgroundColor: "#fff", |
||||||
|
padding: 12, |
||||||
|
borderRadius: 8, |
||||||
|
gap: 12, |
||||||
|
}, |
||||||
|
image: { |
||||||
|
width: widthUtils(60,60).width, |
||||||
|
height: widthUtils(60,60).height, |
||||||
|
borderRadius: 6, |
||||||
|
backgroundColor: "#eee", |
||||||
|
}, |
||||||
|
info: { |
||||||
|
flex: 1, |
||||||
|
justifyContent: "center", |
||||||
|
}, |
||||||
|
row: { |
||||||
|
flexDirection: "row", |
||||||
|
justifyContent: "space-between", |
||||||
|
}, |
||||||
|
name: { |
||||||
|
fontSize: 16, |
||||||
|
fontWeight: "500", |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
price: { |
||||||
|
fontSize: 14, |
||||||
|
fontWeight: "bold", |
||||||
|
color: "#e60012", |
||||||
|
marginLeft: 8, |
||||||
|
}, |
||||||
|
time: { |
||||||
|
fontSize: 12, |
||||||
|
color: "#888", |
||||||
|
marginTop: 4, |
||||||
|
}, |
||||||
|
empty: { |
||||||
|
textAlign: "center", |
||||||
|
color: "#aaa", |
||||||
|
fontSize: 15, |
||||||
|
marginTop: 40, |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,207 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { |
||||||
|
View, |
||||||
|
Text, |
||||||
|
Image, |
||||||
|
StyleSheet, |
||||||
|
ScrollView, |
||||||
|
TouchableOpacity, |
||||||
|
} from "react-native"; |
||||||
|
import widthUtils from "../../utils/widthUtils"; |
||||||
|
import fontSize from "../../utils/fontsizeUtils"; |
||||||
|
import BackIcon from "../../components/BackIcon"; |
||||||
|
import { useNavigation } from "@react-navigation/native"; |
||||||
|
|
||||||
|
const FavoriteItem = ({ |
||||||
|
image, |
||||||
|
title, |
||||||
|
price, |
||||||
|
}: { |
||||||
|
image: string; |
||||||
|
title: string; |
||||||
|
price: number; |
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<View style={styles.item}> |
||||||
|
<Image source={{ uri: image }} style={styles.image} /> |
||||||
|
<View style={styles.info}> |
||||||
|
<Text style={styles.title} numberOfLines={2}> |
||||||
|
{title} |
||||||
|
</Text> |
||||||
|
<Text style={styles.price}>￥{price}</Text> |
||||||
|
<View style={styles.actions}> |
||||||
|
<TouchableOpacity style={[styles.btn, styles.cart]}> |
||||||
|
<Text style={styles.cartText}>加入购物车</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<TouchableOpacity style={[styles.btn, styles.delete]}> |
||||||
|
<Text style={styles.deleteText}>删除</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export const Collection = () => { |
||||||
|
const navigation = useNavigation(); |
||||||
|
const data = [ |
||||||
|
{ |
||||||
|
id: "1", |
||||||
|
image: "https://img.alicdn.com/imgextra/i1/1234567890/O1CN01Item1.jpg", |
||||||
|
title: "韩版宽松休闲卫衣女春秋款薄款学生ins潮", |
||||||
|
price: 89.0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "2", |
||||||
|
image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg", |
||||||
|
title: "小米无线蓝牙耳机半入耳式 轻巧便携", |
||||||
|
price: 129.0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "3", |
||||||
|
image: "https://img.alicdn.com/imgextra/i3/3234567890/O1CN01Item3.jpg", |
||||||
|
title: "华为MateBook X Pro 2020款 13.9英寸全面屏笔记本电脑", |
||||||
|
price: 10999.0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "4", |
||||||
|
image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg", |
||||||
|
title: "小米无线蓝牙耳机半入耳式 轻巧便携", |
||||||
|
price: 129.0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "5", |
||||||
|
image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg", |
||||||
|
title: "小米无线蓝牙耳机半入耳式 轻巧便携", |
||||||
|
price: 129.0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "6", |
||||||
|
image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg", |
||||||
|
title: "小米无线蓝牙耳机半入耳式 轻巧便携", |
||||||
|
price: 129.0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "7", |
||||||
|
image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg", |
||||||
|
title: "小米无线蓝牙耳机半入耳式 轻巧便携", |
||||||
|
price: 129.0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "82", |
||||||
|
image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg", |
||||||
|
title: "小米无线蓝牙耳机半入耳式 轻巧便携", |
||||||
|
price: 129.0, |
||||||
|
}, |
||||||
|
// 可以继续添加更多商品
|
||||||
|
]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<View style={styles.containerBox}> |
||||||
|
<View style={styles.header}> |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => navigation.goBack()} |
||||||
|
style={styles.backButton} |
||||||
|
> |
||||||
|
<BackIcon size={fontSize(22)} /> |
||||||
|
</TouchableOpacity> |
||||||
|
<Text style={styles.titles}>浏览历史</Text> |
||||||
|
<View style={styles.placeholder} /> |
||||||
|
</View> |
||||||
|
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}> |
||||||
|
{data.map((item) => ( |
||||||
|
<FavoriteItem key={item.id} {...item} /> |
||||||
|
))} |
||||||
|
</ScrollView> |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
containerBox: { |
||||||
|
flex: 1, |
||||||
|
backgroundColor: "#f5f5f5", |
||||||
|
}, |
||||||
|
header: { |
||||||
|
paddingInline: 19, |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "space-between", |
||||||
|
backgroundColor: "white", |
||||||
|
width: "100%", |
||||||
|
paddingVertical: 15, |
||||||
|
|
||||||
|
}, |
||||||
|
titles: { |
||||||
|
fontSize: fontSize(20), |
||||||
|
fontWeight: "600", |
||||||
|
flex: 1, |
||||||
|
textAlign: "center", |
||||||
|
}, |
||||||
|
backButton: { |
||||||
|
width: widthUtils(24, 24).width, |
||||||
|
}, |
||||||
|
placeholder: { |
||||||
|
width: widthUtils(24, 24).width, |
||||||
|
}, |
||||||
|
container: { |
||||||
|
backgroundColor: "#f5f5f5", |
||||||
|
paddingLeft: 20, |
||||||
|
paddingRight: 20, |
||||||
|
paddingBottom: 20, |
||||||
|
marginTop: 20, |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
item: { |
||||||
|
flexDirection: "row", |
||||||
|
padding: 12, |
||||||
|
backgroundColor: "#fff", |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderBottomColor: "#eee", |
||||||
|
}, |
||||||
|
image: { |
||||||
|
width: widthUtils(100, 100).width, |
||||||
|
height: widthUtils(100, 100).height, |
||||||
|
borderRadius: 4, |
||||||
|
marginRight: 12, |
||||||
|
}, |
||||||
|
info: { |
||||||
|
flex: 1, |
||||||
|
justifyContent: "space-between", |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: fontSize(15), |
||||||
|
color: "#333", |
||||||
|
lineHeight: 20, |
||||||
|
marginBottom: 6, |
||||||
|
}, |
||||||
|
price: { |
||||||
|
color: "#f40", |
||||||
|
fontSize: fontSize(16), |
||||||
|
marginBottom: 10, |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
flexDirection: "row", |
||||||
|
gap: 8, |
||||||
|
}, |
||||||
|
btn: { |
||||||
|
paddingVertical: 4, |
||||||
|
paddingHorizontal: 10, |
||||||
|
borderRadius: 3, |
||||||
|
borderWidth: 1, |
||||||
|
}, |
||||||
|
cart: { |
||||||
|
borderColor: "#ff5000", |
||||||
|
}, |
||||||
|
delete: { |
||||||
|
borderColor: "#ccc", |
||||||
|
}, |
||||||
|
cartText: { |
||||||
|
fontSize: fontSize(12), |
||||||
|
color: "#ff5000", |
||||||
|
}, |
||||||
|
deleteText: { |
||||||
|
fontSize: fontSize(12), |
||||||
|
color: "#999", |
||||||
|
}, |
||||||
|
}); |
||||||
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 115 KiB |
Loading…
Reference in new issue