带有世博会地点和 perns 的空白屏幕

时间:2021-01-23 02:17:32

标签: reactjs leaflet expo expo-permissions

我正在尝试实施位置服务,在用户同意权限后为传单地图提供用户的坐标。当我通过 expo 编译代码时,它会询问我的位置权限,然后屏幕留空并且似乎无声无息地失败。我不知道是什么问题。

这是我的代码:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import Constants from "expo-constants";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import { render } from 'react-dom';

import 'leaflet/dist/leaflet.css';



export default class App extends React.Component {
  
  constructor(props) {
    super(props);
    
    this.state = {
      region: null,   
    }

    this._getLocationAsync();

  }
  
  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
      if(status !== 'granted')
        console.log('Permission to access location was denied');
    
    let location = await Location.getCurrentPositionAsync({enabledHighAccuracy : true});
    let region = {
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      latitudeDelta: 0.045,
      longitudeDelta: 0.045,
    }

    this.setState({region: region})

  }
  
  
  render() {
    return (
      <MapContainer 
      style={{ height: '100%', width: '100%' }}
      center={[this.state.region]} 
      zoom="30" 
      scrollWheelZoom={true}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
    
      </MapContainer>
    );
  }

}

0 个答案:

没有答案