2017-03-08 55 views
0

我是一個新手在反應原生,從不學習javascript反應原生(IOS)。如何更新數值日期(毫秒)

我需要更新值日期(毫秒),但我不知道如何更新值實時像lat ,LON,我從得到的反應自帶谷歌(製作的Airbnb)

這是我的代碼:

import React, { Component, PropTypes } from 'react'; 
import { 
    StyleSheet, 
    View, 
    Text, 
    Image, 
    Dimensions, 
    TouchableOpacity, 
    MapView, 
    zoom, 
    DeviceEventEmitter 
} from 'react-native'; 
import {Accelerometer, Gyroscope, Magnetometer} from 'NativeModules'; 
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'; 

var today = new Date(); 
var milliseconds = today.getMilliseconds(); 


export default class Route2 extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     Accx: 0, 
     Accy: 0, 
     Accz: 0, 
     Gyx: 0, 
     Gyy: 0, 
     Gyz: 0, 
     Magx: 0, 
     Magy: 0, 
     Magz: 0, 
     region: { 
      latitude: 13.980881, 
      longitude: 100.5545009, 
     } 
    }; 

    this.onRegionChange = this.onRegionChange.bind(this); 
} 

componentDidMount() { 
    Accelerometer.setAccelerometerUpdateInterval(0.1); // in seconds 
    DeviceEventEmitter.addListener('AccelerationData', (data) => { 
     this.setState({ 
      Accx: data.acceleration.x, 
      Accy: data.acceleration.y, 
      Accz: data.acceleration.z, 
     }); 
    }); 
    Accelerometer.startAccelerometerUpdates(); // you'll start getting AccelerationData events above 

    Gyroscope.setGyroUpdateInterval(0.1); // in seconds 
    DeviceEventEmitter.addListener('GyroData', (data) => { 
     this.setState({ 
      Gyx: data.rotationRate.x, 
      Gyy: data.rotationRate.y, 
      Gyz: data.rotationRate.z, 
     }); 
    }); 
    Gyroscope.startGyroUpdates(); // you'll start getting GyroscopicData events above 

    Magnetometer.setMagnetometerUpdateInterval(0.1); // in seconds 
    DeviceEventEmitter.addListener('MagnetometerData', (data) => { 
     this.setState({ 
      Magx: data.magneticField.x, 
      Magy: data.magneticField.y, 
      Magz: data.magneticField.z, 
     }); 
    }); 
    Magnetometer.startMagnetometerUpdates(); // you'll start getting MagnetomerData events above 
} 

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


    render() { 
     return (


      <View style={styles.container}> 

     <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> 
        milliseconds: {milliseconds} 
      Latitude: {this.state.region.latitude}{'\n'} 
      Longitude: {this.state.region.longitude}{'\n'} 
        AccX: {this.state.Accx} 
        AccY: {this.state.Accy} 
        AccZ: {this.state.Accz}{'\n'} 
        GyX: {this.state.Gyx} 
        GyY: {this.state.Gyy} 
        GyZ: {this.state.Gyz}{'\n'} 
        MagX: {this.state.Magx} 
        MagY: {this.state.Magy} 
        MagZ: {this.state.Magz}{'\n'} 
      </Text> 
     </View> 
     </View> 

     ); 
    } 
} 





const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     alignItems: 'center', 
     justifyContent: 'center', 
     backgroundColor: 'white' 
    }, 
    image: { 
     width: 200, 
     height: 200, 
    }, 
    text: { 
     color: 'white', 
     fontWeight: 'bold', 
     backgroundColor: 'transparent', 
     marginTop: 20, 
    }, 
    map: { 
     top: 0, 
    width: width, 
    height: height*2/3 
    } 
}); 
+0

如何經常你想顯示日期值? – vinayr

+0

我想每一秒更新 –

回答

0

簡化的答案 -

constructor(props) { 
    super(props); 
    this.state = { 
     time: '' 
    }; 
    } 

    componentDidMount() { 
    setInterval(() => { 
     this.setState({ 
     time: new Date().getMilliseconds() 
     }); 
    }, 1000); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Text>{this.state.time}</Text> 
     </View> 
    ); 
    } 
+0

非常感謝你 –