Это проект React Native (Expo), над которым я работаю, и я пытаюсь отобразить карту Google в этом компоненте, но она не отображается, несмотря на то, что все сделано правильно и без ошибок.
Вот мой код ниже:
import { StyleSheet, Text, View, Image } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps"; // Import MapView
import * as Location from 'expo-location';
import React, { useState, useEffect, useRef } from "react";
import { carsAround } from "../../dummyData/data";
const RegularMapView = () => {
const [latlong, setLatlong] = useState({});
const _map = useRef(null);
const requestLocationPermission = async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
console.error("Location permission denied");
return false; // Or handle permission denial here
}
return true;
};
const getLocation = async () => {
try {
const hasPermission = await requestLocationPermission();
if (!hasPermission) return;
const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync();
setLatlong({ longitude, latitude });
console.log("User coordinates:", latlong);
} catch (err) {
console.error("Error getting location:", err);
}
};
useEffect(() => {
getLocation(); // Call getLocation on component mount
}, []);
return (
{carsAround.map((item, index) => (
))}
);
};
export default RegularMapView;
const styles = StyleSheet.create({
container: {
flex: 1,
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
},
map: {
...StyleSheet.absoluteFillObject,
},
});
Вот мой app.json:
{
"expo": {
"name": "****",
"slug": "*******",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/appIcon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/images/icon.png",
"resizeMode": "contain",
"backgroundColor": "#000066"
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive.png",
"backgroundColor": "#000066"
},
"package": "com.rodnav",
"config": {
"googleMaps": {
"apiKey": "*************"
},
"permissions": [
"ACCESS_COARSE_LOCATION",
"ACCESS_FINE_LOCATION",
"FOREGROUND_SERVICE"
]
}
},
"web": {
"favicon": "./assets/images/icon.png"
},
"extra": {
"eas": {
"projectId": "***********"
}
},
"plugins": [
"expo-font"
]
}
}
Я могу успешно показать координаты своего местоположения в консоли, что означает, что настройка работает, однако карта по-прежнему не отображается.
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
Подробнее здесь: https://stackoverflow.com/questions/784 ... po-project
Карта Google не отображается в проекте React Native Expo ⇐ Android
Форум для тех, кто программирует под Android
-
Anonymous
1714492677
Anonymous
Это проект React Native (Expo), над которым я работаю, и я пытаюсь отобразить карту Google в этом компоненте, но она не отображается, несмотря на то, что все сделано правильно и без ошибок.
Вот мой код ниже:
import { StyleSheet, Text, View, Image } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps"; // Import MapView
import * as Location from 'expo-location';
import React, { useState, useEffect, useRef } from "react";
import { carsAround } from "../../dummyData/data";
const RegularMapView = () => {
const [latlong, setLatlong] = useState({});
const _map = useRef(null);
const requestLocationPermission = async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
console.error("Location permission denied");
return false; // Or handle permission denial here
}
return true;
};
const getLocation = async () => {
try {
const hasPermission = await requestLocationPermission();
if (!hasPermission) return;
const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync();
setLatlong({ longitude, latitude });
console.log("User coordinates:", latlong);
} catch (err) {
console.error("Error getting location:", err);
}
};
useEffect(() => {
getLocation(); // Call getLocation on component mount
}, []);
return (
{carsAround.map((item, index) => (
))}
);
};
export default RegularMapView;
const styles = StyleSheet.create({
container: {
flex: 1,
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
},
map: {
...StyleSheet.absoluteFillObject,
},
});
[b]Вот мой app.json:[/b]
{
"expo": {
"name": "****",
"slug": "*******",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/appIcon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/images/icon.png",
"resizeMode": "contain",
"backgroundColor": "#000066"
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive.png",
"backgroundColor": "#000066"
},
"package": "com.rodnav",
"config": {
"googleMaps": {
"apiKey": "*************"
},
"permissions": [
"ACCESS_COARSE_LOCATION",
"ACCESS_FINE_LOCATION",
"FOREGROUND_SERVICE"
]
}
},
"web": {
"favicon": "./assets/images/icon.png"
},
"extra": {
"eas": {
"projectId": "***********"
}
},
"plugins": [
"expo-font"
]
}
}
Я могу успешно показать координаты своего местоположения в консоли, что означает, что настройка работает, однако карта по-прежнему не отображается.
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
LOG User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
Подробнее здесь: [url]https://stackoverflow.com/questions/78407569/google-map-not-showing-in-react-native-expo-project[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия