지리적 위치가 획득되면 React-Native-Maps가 다시 렌더링되지 않는 것 같습니다.

Question

Google지도를로드하는 간단한 앱을 만들고 (airbnb의 반응 네이티브지도 라이브러리 사용) 사용자의 현재 위치를 보여줍니다. . 내가 보는 것은지도가 사용자의 위치가 획득되면 다시 렌더링하는 것이 아니라 항상 기본 초기 위치를 표시한다는 것입니다.

저는 React 0.42를 사용 중이며 iOS에서만 테스트하고 있습니다. 여기에 몇 가지 코드를 명확히하는 것입니다

1.) 내가 componentDidMount

componentDidMount() { 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     this.setState({ 
      region: { 
      latitude: position.coords.latitude, 
      longitude: position.coords.longitude, 
      latitudeDelta: 0.01, 
      longitudeDelta: 0.0011 
      } 
     }); 
     }, 
     (error) => alert(JSON.stringify(error)), 
     {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
    ); 
    } 

3) 렌더링으로 내에서 사용자의 위치를 ​​얻을 초기 상태

state = { 
     region: { 
     latitude: 52, 
     longitude: 5, 
     latitudeDelta: 0.0922, 
     longitudeDelta: 0.0421 
     } 
    } 

2

)를 설정, 나는 초기 지역으로지도를 표시하고 사용자 위치가 변경되면 해당 지역이 변경 될 것으로 예상하십시오.

render() { 
    return (
    <View style={{ flex: 1 }}> 
     <View style={{backgroundColor: 'coral', height: 70, justifyContent: 'center', alignItems: 'center'}}> 
     <Text> 
      <Text>longitude: {this.state.region.longitude}</Text> 
      <Text>latitude: {this.state.region.latitude}</Text> 
     </Text> 
     </View> 
     <View style={styles.container}> 
     <MapView 
      provider={PROVIDER_GOOGLE} 
      style={styles.map} 
      initialRegion={this.state.region} 
      region={this.state.region} 
      onRegionChange={this.onRegionChange} 
      onRegionChangeComplete={this.reloadEntities} 
     /> 
     </View> 
    </View> 
    ); 
} 

여기에 그냥이

onRegionChange = (region) => { 
    this.setState({ region }); 
} 

주 재 렌더링의 원인이됩니다 믿고 새로운 지역과 상태를 업데이트의 onRegionChange입니다 : 경도와 위도 텍스트 값은지도 변화의 영역으로 업데이 트를 수행하고 사용자의 위치가 파악되면 업데이트됩니다.

지도가 사용자의 위치가 파악되면 표시되는 내용이 변경되지 않는 이유에 대해 다소 혼란 스럽습니다. 어떤 도움을 많이 주시면 감사하겠습니다!

업데이트 :이 스레드를 살펴 보니 : https://github.com/airbnb/react-native-maps/issues/43 그리고 주로 Android를 중심으로 돌고있는 것 같지만 운이 좋으면 enableHighAccuracy 옵션을 제거하려고했습니다.

Answer 1

을 도움이되기를 바랍니다.

지역이 변경 될 때마다 react-native가 다시로드되고 생성자에서 선언 한 초기 상태로 돌아갑니다.

Answer 2

region 소품과 함께 initialRegion 소품을 사용하지 마십시오.

지도의 초기 영역 외의 뷰포트를 제어하고 싶지 않은 경우에만이 소품을 영역 대신 사용하십시오. 당신이 initialRegion 소품을 제거한 후에

Source

이 작동합니다.

Answer 3

MapView의 region을 지역 상태 값 this.state.region으로 설정하십시오.

당신은 현재의 위치를 ​​얻고 지역으로 설정 한 다음 장치, 위치에 변화가있을 당신의 region 상태로 새로운 값을 설정,이 시간을 감지마다 좌표를 얻기 위해 watchPosition 기능을 사용합니다.

이이 방법

import React, { Component } from 'react'; 
import MapView from 'react-native-maps'; 
import { AppRegistry, View } from 'react-native'; 

const { width, height } = Dimensions.get('window'); 
const ASPECT_RATIO = width/height; 
const LATITUDE  = 37.78825; 
const LONGITUDE  = -122.4324; 
const LATITUDE_DELTA = 0.0122; 
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 
const SPACE   = 0.01; 

class Test extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     region: { 
     latitude: LATITUDE, 
     longitude: LONGITUDE, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA 
     } 
    } 
    } 

componentDidMount() { 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     this.setState({ 
      region: { 
      latitude: position.coords.latitude, 
      longitude: position.coords.longitude, 
      latitudeDelta: LATITUDE_DELTA, 
      longitudeDelta: LONGITUDE_DELTA, 
      accuracy: position.coords.accuracy 
      } 
     }); 
     }, 
     (error) => alert(error.message), 
     {timeout: 10000} 
    ); 

    this.watchID = navigator.geolocation.watchPosition((position) => { 
     const newRegion = { 
     latitude: position.coords.latitude, 
     longitude: position.coords.longitude, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA, 
     accuracy: position.coords.accuracy 
     } 
     this.setState({newRegion}); 
    }); 
    } 

    componentWillUnmount() { 
    navigator.geolocation.clearWatch(this.watchID); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <MapView 
      style={styles.map} 
      region={this.state.region} 
      showsUserLocation={true} 
      followUserLocation={true}> 
     </MapView> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    ...StyleSheet.absoluteFillObject, 
    justifyContent: 'flex-end', 
    alignItems: 'center', 
    }, 
    map: { 
    ...StyleSheet.absoluteFillObject, 
    }, 
}); 

AppRegistry.registerComponent('Test',() => Test); 

맵뷰 MapView에서 showsUserLocation 및 followUserLocation, 앱이 사용자의 현재 위치를 물을 것이다이 방법을 사용하십시오를 작동합니다.

followUserLocation은 showUserLocation에 따라 다릅니다.

경도와 위도가 일정한 것은 예제 일뿐입니다.

는 또한 onRegionChangeComplete={this.reloadEntities} 제거하는 것이 중요합니다