我是React-Native的新手,从不学习JavaScript
我需要更新值日期(毫秒),但我不知道如何实时更新值,例如我从React Antive Google(Airbnb)获得的LON,LON
这是我的代码:
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
}
});
简化的答案 -
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>
);
}