Привет я не могу установить значение с помощью ловушки useState, как вы можете видеть на выводе pickLocation. Когда я выбираю консоль, я получаю начальные значения. Кроме того, моя карта не отображается даже с начальными значениями. В IOS мое сообщение «Карта еще не выбрана», в соответствии с моим состоянием isFetching, и для Android есть другая ошибка карты Error using newLatLngBounds(...
Я попробовал ответы здесь: https://stackoverflow.com/a/54069332/2277245 с использованием useEffect и оператора распространенияно они тоже не работали. Кто-нибудь поможет? Спасибо
import React, { useState, useEffect } from "react";
import {
Alert,
StyleSheet,
Text,
View,
ActivityIndicator,
Platform
} from "react-native";
import { useSelector } from "react-redux";
import MapView, { Marker } from "react-native-maps";
import Constants from "expo-constants";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import Colors from "../constants/Colors";
const MapScreen = props => {
const availableVenues = useSelector(state => state.cafes.availableVenues);
const [isFetching, setIsFetching] = useState(false); //spinner
const initialValues = {
latitude: 37.78,
longitude: -122.43,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
};
const [pickedLocation, setPickedLocation] = useState(initialValues);
const selectItemHandler = (id, title) => {
props.navigation.navigate("VenueDetail", {
venueId: id,
venueTitle: title
});
};
useEffect(() => {
if (Platform.OS === "android" && !Constants.isDevice) {
Alert.alert(
"Error",
"Oops, this will not work on Sketch in an Android emulator. Try it on your device!",
[
{
text: "Okay"
}
]
);
} else {
getLocationHandler();
}
}, []);
const verifyPermissions = async () => {
const result = await Permissions.askAsync(Permissions.LOCATION);
if (result.status !== "granted") {
Alert.alert(
"Insufficient Permissions",
"Sorry, we need location permissions to make this work!",
[
{
text: "Okay"
}
]
);
return false;
}
return true;
};
const getLocationHandler = async () => {
const hasPermission = await verifyPermissions();
if (!hasPermission) {
return;
}
try {
setIsFetching(true);
const location = await Location.getCurrentPositionAsync({
timeout: 5000
});
const result = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.1,
longitudeDelta: 0.1
};
setPickedLocation({...pickedLocation,...result});
console.log(pickedLocation); //Showing initial values
} catch (err) {
Alert.alert("Could Not Fetch Location", "Please Try again", [
{
text: "Okay"
}
]);
}
setIsFetching(false);
};
return (
<View style={styles.mapContainer}>
{isFetching ? (
<ActivityIndicator color={Colors.greenPrimary} size="large" />
) : (
<Text>No map chosen yet!</Text>
)}
<MapView
style={styles.map}
showsUserLocation={true}
initialRegion={pickedLocation}
region={pickedLocation}
>
{availableVenues.map(marker => (
<Marker
key={marker.id}
coordinate={{ latitude: marker.lat, longitude: marker.lng }}
title={marker.title}
description={marker.address}
onPress={() => {
selectItemHandler(marker.id, marker.title);
}}
/>
))}
</MapView>
</View>
);
};
MapScreen.navigationOptions = {
headerTitle: "Map of Venues"
};
const styles = StyleSheet.create({
mapContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
map: {
justifyContent: "center",
alignItems: "center"
}
});
export default MapScreen;