Reactネイティブマップの読み込み位置

Question

私はreact-native-mapsモジュールを使用してアプリケーションを作成しようとしています。 私はnavigator.geolocation.watchPosition経由でデバイスの位置を取得できます。また、showUserLocationプロパティで構築されたマップも使用しています。 読み込み時にマップがユーザーの場所に移動することをどうやって確認できますか？世界全体やハードコードされた初期の位置を見ていない。

編集： これは私のreact-native-map要素です。この領域はハードコードされた初期の の位置に設定されています。その位置を常にユーザーの場所にロードするように変更したいと思います。

<View style={styles.container}> 
        <MapView 
        style={styles.map} 
        region={this.state.initialPosition} 
        showsMyLocationButton={true} 
        loadingEnabled={true} 
        onRegionChange={(region)=> this.setState({ initialPosition:region })} 
        onLongPress={this.mapOnPress} 
        showsUserLocation={true} 
        > 

私はアプリで使用していた場所はここからですが、それは非常に遅く負荷をだ、それが通常より20代よりも、私は即座に、ユーザーの場所に、この20代と負荷をスキップしたいと思います。

this.watchID= navigator.geolocation.watchPosition((position)=>{ 
    var lastRegion ={ 
       latitude: lat, 
       longitude: lon, 
       longitudeDelta: LON_D, 
       latitudeDelta: LAT_D 
      } 
    this.setState({initialPosition:lastRegion})},(error)=>alert(error),{enableHighAccuracy:true,timeout:20,maximumAge:10}) 

解決方法はありますか？あなたの助け:)

Answer 1

のためにあなたがこれを試すことができますおかげで、タイムアウトユニットは、RNにms.Testedさ：44、

class Map extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     permissionState: false, 
     latitude: null, 
     longitude: null, 
     error: null, 
    }; 
} 

componentDidMount() { 
    Platform.OS === 'android' && Platform.Version >= 23 ? this.requestMapPermission() : this.requestMap() 
} 

async requestMapPermission() { 
    try { 
     const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION) 
     if (granted === PermissionsAndroid.RESULTS.GRANTED) { 
      console.log('Granted'); 
      this.watchId = navigator.geolocation.getCurrentPosition(
       (position) => { 
        console.log('Position is watched'); 
        this.setState({ 
         permissionState: true, 
         latitude: position.coords.latitude, 
         longitude: position.coords.longitude, 
         error: null, 
        }); 
       }, 
       (error) => this.setState({error: error.message}), 
       {enableHighAccuracy: false, timeout: 20000, maximumAge: 1000}, 
      ); 

     } else { 
      console.log('not Granted'); 
      this.setState({ 
       permissionState: false, 
      }); 
     } 
    } catch (err) { 
     console.warn(err) 
    } 
} 

requestMap() { 
    this.watchId = navigator.geolocation.watchPosition(
     (position) => { 
      this.setState({ 
       permissionState: true, 
       latitude: position.coords.latitude, 
       longitude: position.coords.longitude, 
       error: null, 
      }); 
     }, 
     (error) => this.setState({error: error.message, permissionState: false,}), 
     {enableHighAccuracy: false, timeout: 20000, maximumAge: 1000}, 
    ); 
} 


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

render() { 
    var {height, width} = Dimensions.get('window'); 
    return (
     <View style={{height: 150, justifyContent: 'center'}}> 
      { 
       this.state.permissionState === true ? 
        <MapView 
         minZoomLevel={16} 
         style={{height: 150, marginBottom: 5, marginTop: 5}} 
         region={{ 
          latitude: this.state.latitude, 
          longitude: this.state.longitude, 
          latitudeDelta: 0.0922, 
          longitudeDelta: 0.0421 
         }}> 
         <MapView.Marker 
          coordinate={{ 
           latitude: (this.state.latitude + 0.00000), 
           longitude: (this.state.longitude + 0.00000), 
          }}> 
          <View> 
           <Icon name="place" size={40} color="#038FC0"/> 
          </View> 
         </MapView.Marker> 
        </MapView> : 
        <View style={{ 
         borderWidth: 1, 
         borderColor: '#6f6f6f', 
         height: 150, 
         justifyContent: 'center', 
         alignItems: 'center', 
        }}> 
         <Text>No Permission for location</Text> 

        </View> 


      } 

     </View> 
    ); 
} 
} 

const styles = StyleSheet.create({ 
map: { 
    ...StyleSheet.absoluteFillObject, 
} 
}); 

export default Map;