本地反应(IOS)。我需要更新并打印价值纬度和经度

时间:2017-03-04 06:00:04

标签: javascript ios iphone react-native

我需要从真实位置更新纬度和经度(当前位置不是我设置的假位置)

我设置的值是假位置 北纬: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
  }
});

1 个答案:

答案 0 :(得分:0)

您需要实际收听GPS并使用其数据进行更新。请查看此文档,特别是&#34; watchPosition&#34;。您可以将watchPosition的回调设置为组件中设置state.region。

的setter

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