GoPathDetail.js
2.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, {useState, useContext, useEffect, useCallback} from 'react';
import {Text, View, StyleSheet, TouchableOpacity, ScrollView, TextInput} from 'react-native';
import {useDispatch, useSelector} from "react-redux";
import {useNavigation} from '@react-navigation/native';
import WalkPathComponent from "../components/WalkPathComponent";
import BusPathComponent from "../components/BusPathComponent";
import LanePathComponent from "../components/LanePathComponent";
import {MaterialCommunityIcons} from "@expo/vector-icons";
const GoPathDetail = (props) => {
const navigation = useNavigation();
const {route} = props;
const {detail} = route.params;
const [pathDetails, setPathDetails] = useState(null);
const {startLocation, endLocation, optRoute} = useSelector(state => state.location);
useEffect(() => {
setPathDetails(detail);
console.log(detail)
}, []);
return (
<ScrollView>
<View style={styles.input}>
<MaterialCommunityIcons color={'red'} name={'map-marker'} size={26}/>
<TextInput
style={styles.inputText}
value={startLocation.title}
/>
</View>
{pathDetails ?
pathDetails.map((detail, index) => {
if (detail.trafficType === '도보') {
return (
<WalkPathComponent pathDetail={detail}/>
)
} else if (detail.trafficType === '버스') {
return (
<BusPathComponent pathDetail={detail}/>
)
} else (detail.trafficType === '지하철')
{
return (
<LanePathComponent pathDetail={detail}/>
)
}
})
:
null
}
<View style={styles.input}>
<MaterialCommunityIcons color={'blue'} name={'map-marker'} size={26}/>
<TextInput
style={styles.inputText}
value={endLocation.title}
/>
</View>
</ScrollView>
);
}
export default GoPathDetail;
const styles = StyleSheet.create({
input: {
borderRadius: 20,
paddingLeft: 10,
paddingTop: 5,
paddingRight: 10,
width: 350,
height: 30,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
borderBottomColor: '#f0f8ff',
marginBottom: 10,
// borderBottomWidth: StyleSheet.hairlineWidth,
},
inputText: {
flex: 1,
fontWeight: 'bold',
}
})