Untitled
unknown
plain_text
a month ago
8.2 kB
6
Indexable
Never
import React, { useState } from "react"; import { View, TextInput, Button, Image, StyleSheet, Text, ScrollView, StatusBar, TouchableOpacity, FlatList, } from "react-native"; // Thêm StyleSheet import { Card } from "react-native-elements"; import Icon from "react-native-vector-icons/FontAwesome"; import { categories } from "../constants/categories"; import COLORS from "../constants/colors"; const ImageScreen = () => { const index = 0; const destinations = [ { name: "Hoàng Thành Thăng Long", url: "https://media-cdn-v2.laodong.vn/Storage/NewsPortal/2023/5/7/1189286/Anh-Hoang-Thanh-Than-11.jpg", imageList: [ "https://ik.imagekit.io/tvlk/blog/2022/03/hoang-thanh-thang-long-1.jpg", "https://image.nhandan.vn/1200x630/Uploaded/2023/igpcvcvjntc8510/2022_10_02/304907405-1678216739216079-5793824505040513118-n-1164.jpg.webp", "https://hoangthanhthanglong.com/store/uploads/2018/11/38.jpg", "https://hoangthanhthanglong.com/store/uploads/2022/08/1M6A4290-800x500.jpg", "https://tl.cdnchinhphu.vn/344445545208135680/2022/4/30/anh-httl-16512788990051146244697.jpg", "https://static1.cafeland.vn/cafelandnew/hinh-anh/2022/12/08/hoang-thanh-thang-long.png", "https://file3.qdnd.vn/data/images/0/2022/09/10/vuhuyen/hoang-thanh.jpg?dpi=150&quality=100&w=870", "https://hoangthanhthanglong.com/store/uploads/2018/11/untitled-126.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/untitled-85.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/untitled-7.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/23.jpg", "http://hoangthanhthanglong.com/store/uploads/2018/11/45.jpg", "http://hoangthanhthanglong.com/store/uploads/2018/11/44.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/30.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/28.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/36.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/37.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/35.jpg", "https://hoangthanhthanglong.com/store/uploads/2018/11/34.jpg", "http://hoangthanhthanglong.com/store/uploads/2018/11/47.jpg", "http://hoangthanhthanglong.com/store/uploads/2018/11/52.jpg", "http://hoangthanhthanglong.com/store/uploads/2018/11/48.jpg", ], }, { name: "Hỏa Lò", url: "https://ik.imagekit.io/tvlk/blog/2022/11/go-and-share-nha-tu-hoa-lo-1.jpg?tr=dpr-2,w-675", imageList: [ "https://ik.imagekit.io/tvlk/blog/2022/11/go-and-share-nha-tu-hoa-lo-1.jpg?tr=dpr-2,w-675", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRc8DyoEiA6E7JPIQ-481Ix7Vl0JESdcxu6g&usqp=CAU", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcyeA9clef-o5Wiy2KwXqinFoG7EnexjiVrA&usqp=CAU", "http://old.hoalo.vn/DataFiles/2015/12/News/image014.jpg", "http://old.hoalo.vn/DataFiles/2015/12/News/image016.jpg", "http://old.hoalo.vn/DataFiles/2015/12/News/image006.jpg", "http://old.hoalo.vn/DataFiles/2015/12/News/image020.jpg", "http://old.hoalo.vn/DataFiles/2015/12/News/image032.jpg", "http://old.hoalo.vn/DataFiles/2015/12/News/image034.jpg", "http://old.hoalo.vn/DataFiles/2015/12/News/image052.jpg", "http://old.hoalo.vn/DataFiles/2015/12/News/image054.jpg", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCSWgBcz1AuYGGOffb_JzPfuv09Im8_Xcsng&usqp=CAU", "https://vcdn1-dulich.vnecdn.net/2018/08/27/2-1535360145.jpg?w=460&h=0&q=100&dpr=2&fit=crop&s=NIqsaPVHt1XXQlX-wAI9FQ", "https://cdnimg.vietnamplus.vn/uploaded/mzdic/2023_02_15/ttxvn_ha_noi_ra_mat_tour_dem_hoa_lo_1.jpg", ], }, { name: "Quảng trường Ba Đình", url: "https://reviewvilla.vn/wp-content/uploads/2023/01/quang-truong-ba-dinh-2.jpg", imageList: [ "https://statics.vinpearl.com/quang-truong-ba-dinh-1_1680149609.jpg", "https://statics.vinpearl.com/quang-truong-ba-dinh-2_1680149655.jpg", "https://statics.vinpearl.com/quang-truong-ba-dinh-4_1680149711.jpg", "https://media.mia.vn/uploads/blog-du-lich/kham-pha-quang-truong-ba-dinh-noi-luu-giu-lich-su-giua-long-ha-noi-1639388972.jpg", "https://statics.vinpearl.com/quang-truong-ba-dinh-7_1680149793.jpg", "https://mediaim.expedia.com/destination/1/cc157faf5813cc8fffa749c761051845.jpg", "https://vnanet.vn/Data/Articles/2020/09/01/4991644/vna_potal_quang_truong_ba_dinh_%E2%80%93_noi_ghi_dau_nhieu_su_kien_trong_dai_cua_dat_nuoc_111645353_stand.jpg", "https://i.pinimg.com/736x/9b/b4/19/9bb41948638faf3e21a473f939f824dc.jpg", "https://kenh14cdn.com/thumb_w/660/203336854389633024/2022/4/30/va06208-16512840381401671278631.jpg", "https://res.cloudinary.com/nifehub-production/image/upload/public/64c/c08/957/64cc0895737fe311406095.jpg", "https://i.imgur.com/pd9ykjG.jpg", "https://file.qdnd.vn/data/images/0/2018/09/01/nguyenthao/chu%20tich%20hcm.jpg?w=575", "https://dulichkhampha24.com/wp-content/uploads/2020/01/quang-truong-ba-dinh-ha-noi-11.jpg", "https://kenh24h.com.vn/wp-content/uploads/2020/09/1-3.jpg", ], }, ]; const [activeCategory, setActiveCategory] = useState(1); const renderTicket = (item) => { return ( <ScrollView style={{ marginTop: 30 }}> {destinations[index].imageList.map(renderItems)} </ScrollView> ); }; const renderCategoryContent = () => { const selectedCategory = categories.find( (category) => category.id === activeCategory ); if (!selectedCategory) { return null; } if (selectedCategory.id === 4) { return renderTicket(selectedCategory); } }; const renderItems = (item, idx) => { if (idx % 2 === 0) { return ( <View style={styles.row} key={idx}> <Image source={{ uri: item }} style={styles.image} key={idx} /> <Image source={{ uri: destinations[index].imageList[idx + 1] }} style={styles.image} key={idx + 1} /> </View> ); } }; return ( <View style={{ flex: 1, backgroundColor: "white" }}> <StatusBar barStyle="dark-content" backgroundColor="#fff" hidden={false} /> {/* Header */} <View style={{ width: "100%", flexDirection: "row", justifyContent: "center", paddingTop: 16, backgroundColor: "white", }} > <TouchableOpacity style={{ position: "absolute", left: 16 }}> <Icon name="angle-left" size={24} style={{ paddingLeft: 16, bottom: -8 }} ></Icon> </TouchableOpacity> <Text style={{ fontSize: 18, fontWeight: 700, marginBottom: 8, bottom: 8, }} > {destinations[index].name} </Text> </View> <View style={{ paddingLeft: 20, paddingRight: 20, marginTop: 12 }}> <FlatList horizontal showsHorizontalScrollIndicator={false} data={categories} keyExtractor={(item) => item.id} style={{ overflow: "visible" }} renderItem={({ item }) => { let isActive = item.id === activeCategory; let activeTextClass = isActive ? "white" : "black"; return ( <TouchableOpacity onPress={() => { setActiveCategory(item.id); }} style={{ backgroundColor: isActive ? COLORS.primary : "rgba(0, 0, 0, 0.07)", padding: 8, paddingLeft: 20, paddingRight: 20, borderRadius: 9999, marginRight: 12, }} > <Text style={{ color: activeTextClass, fontWeight: 600, }} > {item.title} </Text> </TouchableOpacity> ); }} ></FlatList> </View> {/* Body */} {renderCategoryContent()} </View> ); }; const styles = StyleSheet.create({ image: { flex: 1, height: 200, resizeMode: "cover", borderRadius: 30, margin: 4, }, row: { flexDirection: "row", marginBottom: 10, }, }); export default ImageScreen;