MapBox на React Native не появляется / не работает - PullRequest
Новая
       51

MapBox на React Native не появляется / не работает

0 голосов
/ 31 марта 2020

Я пытаюсь использовать MapBox, но без успеха на экране ничего не появляется. Функция location () получает текущую широту и долготу, которые я могу sh использовать в centerCoordinate в MapBoxGL.Camera, но я не смог, потому что в "." Есть ошибка. ({UserPosition.longitude}). Но все же, поместив координаты, которые есть в коде, без использования переменных ({userPosition.longitude}), ничего не получится, на экране ничего не появится. 

import React, {useEffect, useState} from 'react';
import MapBoxGL from '@react-native-mapbox-gl/maps';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  PermissionsAndroid,
} from 'react-native';

import Background from '../../components/Background';

import Geolocation from 'react-native-geolocation-service';

const styles = StyleSheet.create({
  h1: {
    fontSize: 20,
    textAlign: 'center',
    marginVertical: 5,
    marginBottom: 10,
    color: '#fff',
    color: 'white',
    fontWeight: 'bold',
  },
  p: {
    alignItems: 'flex-start',
  },
});

MapBoxGL.setAccessToken(
  'pk.eyJ1IjoiYWxlcXNzaWEiLCJhIjoiY2s4ZTFlcmlsMTA2ZzNtcWM2b3hkdWw4ZiJ9.66hkl5U84MBS4bOuwtx7vw',
);

export default function Location() {
  const [hasLocationPermission, setHasLocationPermission] = useState(false);
  const [userPosition, setUserPosition] = useState(false);

  async function verifyLocationPermission() {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('permissão concedida');
        setHasLocationPermission(true);
      } else {
        console.error('permissão negada');
        setHasLocationPermission(false);
      }
    } catch (err) {
      console.warn(err);
    }
  }

  useEffect(() => {
    verifyLocationPermission();

    if (hasLocationPermission) {
      Geolocation.getCurrentPosition(
        position => {
          setUserPosition({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          });
        },
        error => {
          console.log(error.code, error.message);
        },
      );
    }
  }, [hasLocationPermission]);

  return (
    <Background>
      <View style={{alignItems: 'center', padding: 15}}>
        <ScrollView>
          <Text style={styles.h1}>Localização</Text>

          <Text style={styles.h1}>Latitude: {userPosition.latitude}</Text>
          <Text style={styles.h1}>Longitude: {userPosition.longitude}</Text>

          <MapBoxGL.MapView styleURL={MapBoxGL.StyleURL.Dark}>
            <MapBoxGL.Camera
              centerCoordinate={[-23.9700815, -46.3690947]}
              zoomLevel={11}
            />
          </MapBoxGL.MapView>
        </ScrollView>
      </View>
    </Background>
  );
}
...