File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, {useContext} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Map from '../component/Map';
import BottomDrop from './../component/BottomDrop';
import Button from './../component/Button';
import {
pageTitle,
directionAlign,
pageTitleBox,
} from './../resoureces/styles/GlobalStyles';
import {MapContext} from './../context/MapContext';
import {Polyline, Marker} from 'react-native-maps';
import EndPointMarker from '../resoureces/files/images/end_point.png';
import {PRIMERY, WHITE} from '../color';
export default function DestinationList({navigation}) {
const {searchQuery, nodes} = useContext(MapContext);
console.log('List', nodes.length);
//node 중심 좌표 구하기
const nodesCenterLength = Math.ceil(nodes.length / 2);
const nodesCenterPoint = nodes[nodesCenterLength];
console.log('nodesCenterPoint', nodesCenterPoint);
//node 마지막 좌표 구하기
const nodesEndPoint = nodes.slice(-1);
const resultEndPoint = nodesEndPoint[0];
return (
<View style={styles.container}>
<View style={pageTitleBox}>
<Text style={pageTitle}>{searchQuery}</Text>
</View>
<Map
lat={nodesCenterPoint.latitude}
long={nodesCenterPoint.longitude}
latDelta={0.3}
longDelta={0.3}
showsUserLocation={true}>
<Marker coordinate={resultEndPoint} image={EndPointMarker} />
<Polyline coordinates={nodes} strokeWidth={10} strokeColor={PRIMERY} />
</Map>
<BottomDrop>
<View style={[directionAlign, {flexDirection: 'row'}]}>
<Text style={{flex: 9}}>{searchQuery}</Text>
<Button
title={'운행 시작'}
padding={10}
color={WHITE}
backgroundColor={PRIMERY}
onPress={() => {
navigation.navigate('Driving');
}}
/>
</View>
</BottomDrop>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: WHITE,
},
});