Untitled
unknown
plain_text
2 years ago
4.0 kB
6
Indexable
import React, { useState, useRef } from 'react'; import { StyleSheet, View, Text, Dimensions, Alert, TouchableOpacity } from 'react-native'; import MapView, { Marker } from 'react-native-maps'; import { Picker } from '@react-native-picker/picker'; type City = { name: string; latitude: number; longitude: number; population: string; } const cities: City[] = [ { name: 'Moscow', latitude: 55.7558, longitude: 37.6173, population: '12.5 million' }, { name: 'Saint-Petersburg', latitude: 59.9343, longitude: 30.3351, population: '5.4 million' }, { name: 'Sochi', latitude: 43.6028, longitude: 39.7342, population: '364,171' }, { name: 'Ivanovo', latitude: 57.0054, longitude: 41.0089,population: '408,330' }, { name: 'Irkutsk', latitude: 52.2864, longitude: 104.3050, population: '620,694'}, ]; export default function App() { const [selectedCity, setSelectedCity] = useState(cities[0]); const [region, setRegion] = useState({ latitude: 55.7558, longitude: 37.6173, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }); const handleCityChange = (city: City) => { setSelectedCity(city); setRegion({...region, latitude: city.latitude, longitude: city.longitude}) if (city.name === "Ivanovo" || city.name === "Irkutsk"){ alert(`${city.name}: population ${city.population}`); } }; const handleMarkerPress = () => { alert(`${selectedCity.name}: population ${selectedCity.population}`); }; const handleZoomIn = () => { const { latitudeDelta, longitudeDelta } = region; setRegion({ ...region, latitudeDelta: latitudeDelta * 0.5, longitudeDelta: longitudeDelta * 0.5, }); }; const handleZoomOut = () => { const { latitudeDelta, longitudeDelta } = region; setRegion({ ...region, latitudeDelta: latitudeDelta * 2, longitudeDelta: longitudeDelta * 2, }); }; return ( <View style={styles.container}> <View style={styles.header}> <Text style={styles.headerText}>Map Demo Page</Text> <Picker selectedValue={selectedCity} style={{ height: 50, width: 150 }} onValueChange={handleCityChange} > {cities.map((city, index) => ( <Picker.Item key={index} label={city.name} value={city} /> ))} </Picker> </View> <MapView style={styles.map} region={region} > <Marker coordinate={{ latitude: selectedCity.latitude, longitude: selectedCity.longitude }} onPress={handleMarkerPress} /> </MapView> <View style={styles.buttonContainer}> <TouchableOpacity style={styles.button} onPress={handleZoomIn}> <Text>+</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={handleZoomOut}> <Text>-</Text> </TouchableOpacity> </View> <View style={styles.footer}> <Text style={styles.footerText}>Давыдов Давид Робертович ИУ3-81Б: davydov.dr@do-student.ru</Text> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 10, }, headerText: { fontSize: 20, fontWeight: 'bold', }, map: { flex: 1, }, buttonContainer: { position: 'absolute', bottom: 60, right: 20, flexDirection: 'column', alignItems: 'center', }, button: { width: 50, height: 50, borderRadius: 25, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', marginVertical: 10, }, buttonText: { fontSize: 24, fontWeight: 'bold', }, footer: { backgroundColor: 'white', padding: 10, position: 'absolute', bottom: 0, left: 0, right: 0, }, footerText: { fontSize: 16, color: 'black', }, });
Editor is loading...