import Svg, { Path, Rect } from 'react-native-svg';
import * as React from 'react';
import {
View,
Text,
useWindowDimensions,
StyleSheet,
Image,
ImageSourcePropType,
Pressable,
ViewStyle
} from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import { FlashList } from '@shopify/flash-list';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalInput from '../global/normal_input';
export interface TabItem {
imgURL: ImageSourcePropType;
date: string;
time: string;
chargeStationName: string;
chargeStationAddress: string;
distance: string;
}
interface TabViewComponentProps {
titles: string[];
tabItems: TabItem[];
}
const CheckMarkLogoSvg = () => (
);
const dummyTabItems: TabItem[] = [
{
imgURL: require('../../assets/dummyStationPicture.png'),
date: '今天',
time: '16:30',
chargeStationName: '上環街市充電站',
chargeStationAddress: '香港上環皇后大道中345號',
distance: '400米'
},
{
imgURL: require('../../assets/dummyStationPicture2.png'),
date: '3月15',
time: '17:45',
chargeStationName: '中環IFC充電站',
chargeStationAddress: '香港中環皇后大道中999號',
distance: '680米'
},
{
imgURL: require('../../assets/dummyStationPicture2.png'),
date: '4月20',
time: '12:30',
chargeStationName: '中環IFC充電站',
chargeStationAddress: '香港中環皇后大道中999號',
distance: '680米'
},
{
imgURL: require('../../assets/dummyStationPicture.png'),
date: '今天',
time: '16:30',
chargeStationName: '上環街市充電站',
chargeStationAddress: '香港上環皇后大道中345號',
distance: '400米'
},
{
imgURL: require('../../assets/dummyStationPicture.png'),
date: '今天',
time: '16:30',
chargeStationName: '上環街市充電站',
chargeStationAddress: '香港上環皇后大道中345號',
distance: '400米'
}
];
const LocationTabComponent: React.FC = ({
titles,
tabItems
}) => {
const layout = useWindowDimensions();
//tab 1
const FirstRoute = () => (
{
return (
{item.chargeStationName}
{item.chargeStationAddress}
Walk-in
{item.distance}
);
}}
estimatedItemSize={10}
/>
);
//tab 2
const SecondRoute = () => (
{
return (
{item.chargeStationName}
{item.chargeStationAddress}
Walk-in
{item.distance}
);
}}
estimatedItemSize={10}
/>
);
const renderScene = SceneMap({
firstRoute: FirstRoute,
secondRoute: SecondRoute
});
const [routes] = React.useState([
{ key: 'firstRoute', title: titles[0] },
{ key: 'secondRoute', title: titles[1] }
]);
const [index, setIndex] = React.useState(0);
const renderTabBar = (props: any) => (
(
{route.title}
)}
indicatorStyle={{
backgroundColor: '#025c72'
}}
style={{
backgroundColor: 'white',
borderColor: '#DBE4E8',
elevation: 0,
marginHorizontal: 15,
borderBottomWidth: 0.5
}}
/>
);
return (
);
};
const styles = StyleSheet.create({
container: { flexDirection: 'row' },
image: { width: 100, height: 100, margin: 15, borderRadius: 10 },
textContainer: { flexDirection: 'column', gap: 8, marginTop: 22 }
});
// ***************************************************************
const ReservationLocationPage = () => {
const CrossLogoSvg = () => (
);
return (
console.log('abc')}>
預約地點
console.log('abc')}
extendedStyle={{ padding: 24 }}
/>
);
};
export default ReservationLocationPage;