2017-03-04 36 views
0

我需要更新從實際位置的經度和緯度(當前位置不是假的位置,我設置)反應原生(IOS)。我需要更新和打印值的經度和緯度

,我設置的值是假的位置 緯度:14.0208, 經度:100.525

我試着在我的設備上發佈。 GPS已

,但我不知道如何從實際位置(實時更新)

謝謝打印。

這是我的代碼:

import React, { Component, PropTypes } from 'react'; 
import { 
    StyleSheet, 
    View, 
    Text, 
    Image, 
    Dimensions, 
    TouchableOpacity, 
    MapView 
} from 'react-native'; 
var {height, width} = Dimensions.get('window'); 
import api from './api'; 
import Profile from './Profile'; 
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view'; 
import Info from './Info'; 
// import motion from './motion'; 





export default class Route extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     region: { 
      latitude: 14.0208, 
      longitude: 100.5250, 
     } 
    }; 

} 




    render() { 
     return (


      <View style={styles.container}> 
      <ScrollableTabView 
      style={{marginTop: 20, }} 
      initialPage={2} 
      renderTabBar={() => <ScrollableTabBar />} 
     > 
      <Text tabLabel='Profile'></Text> 
      <Text tabLabel='Route'></Text> 
      <Text tabLabel='Information'></Text> 
      </ScrollableTabView> 
      <TouchableOpacity tabLabel='Profile' onPress={() => this.tabView.Profile(2)}> 
     </TouchableOpacity> 

     <MapView style={styles.map} 
      mapType="standard" 
      showsUserLocation={true} 
      followsUserLocation={true} 
      showsCompass={false} 
      showsPointOfInterest={false} 
        region={this.state.region} 
      onRegionChange={this.onRegionChange} 
     > 

     </MapView> 
       <View style={styles.container}> 
      <Text> 
      Latitude: {this.state.region.latitude}{'\n'} 
      Longitude: {this.state.region.longitude}{'\n'} 

      </Text> 
     </View> 
     </View> 

     ); 
    } 
} 





const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     alignItems: 'center', 
     justifyContent: 'center', 
     backgroundColor: 'white' 
    }, 
    image: { 
     width: 200, 
     height: 180, 
    }, 
    text: { 
     color: 'white', 
     fontWeight: 'bold', 
     backgroundColor: 'transparent', 
     marginTop: 20, 
    }, 
    map: { 
     //top: -150, 
    width: 700, 
    height: 400 
    } 
}); 

回答

0

你需要真正聽使用其數據的GPS和更新。看看這個文檔,特別是「watchPosition」。您可以將watchPosition的回調設置爲設置state.region的組件中的setter。

https://facebook.github.io/react-native/docs/geolocation.html

+0

我能解決這個問題,但是當我重新加載它只是在模擬器(延遲)慢如何解決這個問題 我只是加上我的代碼,並獲得延遲 this.onRegionChange = this.onRegionChange。綁定(本); } onRegionChange(region){ \t this.setState({region}); } –