Javascript 反应本机：每一秒钟获取一次位置更新

目前，我有这个最新的代码，它可以工作，但大部分时间都不能工作。我有时会遇到延迟，根本不更新。我的目标是获得实时职位更新。我这样做的方法是使用

setInterval（）

函数，我在

componentDidMount（）中使用了

我曾尝试使用
navigator.geolocation.watchPosition
，但没有成功。也许我用错了

componentDidMount() {
      this.state.interval = setInterval(() => {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            console.log("Pos: "+position.coords.speed);
            this.setState({
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              speed: position.coords.speed,
              error: null,
            });
          },
          (error) => this.setState({ error: error.message }),
          { enableHighAccuracy: true, maximumAge: 0},
          );
      },1000);
    }

我通过每x秒更新一次状态解决了这个问题：

import { Platform, View, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

export default class App extends Component {

  state = {
    location: null,
    errorMessage: null,
  };

    _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }

    let location = await Location.getCurrentPositionAsync({});

    this.setState({ location });
};


  componentDidMount() {
    if (Platform.OS === 'android' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
      });
    } else {
      setInterval(this._getLocationAsync.bind(this),2000);
    }
  }




  render () {
    let text = 'Waiting..';
    if (this.state.errorMessage) {
      text = this.state.errorMessage;
    } else if (this.state.location) {
      text = JSON.stringify(this.state.location);
    }

     return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{text}</Text>
      </View>
    );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
});

从'react native'导入{Platform，View，StyleSheet，Text}；
从“expo常量”导入常量；
从“世博会地点”导入*作为地点；
从“expo Permissions”导入*作为权限；
导出默认类应用程序扩展组件{
状态={
位置：空，
errorMessage:null，
};
_getLocationAsync=async（）=>{
让{status}=wait Permissions.askAsync（Permissions.LOCATION）；
如果（状态！=“已授予”）{
这是我的国家({
errorMessage:'访问位置的权限被拒绝'，
});
}
let location=await location.getCurrentPositionAsync（{}）；
this.setState（{location}）；
};
componentDidMount（）{
if（Platform.OS==='android'&&！Constants.isDevice）{
这是我的国家({
errorMessage:“哦，这在Android模拟器中的草图上不起作用。请在您的设备上试用！”，
});
}否则{
setInterval（this.\u getLocationAsync.bind（this），2000）；
}
}
渲染（）{
让text='Waiting..'；
if（this.state.errorMessage）{
text=this.state.errorMessage；
}else if（this.state.location）{
text=JSON.stringify（this.state.location）；
}
返回(
{text}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
},
第段：{
差额：24，
尺码：18，
textAlign:'中心'，
},
});
我通过每x秒更新一次状态来解决这个问题：

import { Platform, View, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

export default class App extends Component {

  state = {
    location: null,
    errorMessage: null,
  };

    _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }

    let location = await Location.getCurrentPositionAsync({});

    this.setState({ location });
};


  componentDidMount() {
    if (Platform.OS === 'android' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
      });
    } else {
      setInterval(this._getLocationAsync.bind(this),2000);
    }
  }




  render () {
    let text = 'Waiting..';
    if (this.state.errorMessage) {
      text = this.state.errorMessage;
    } else if (this.state.location) {
      text = JSON.stringify(this.state.location);
    }

     return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{text}</Text>
      </View>
    );
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
});

从'react native'导入{Platform，View，StyleSheet，Text}；
从“expo常量”导入常量；
从“世博会地点”导入*作为地点；
从“expo Permissions”导入*作为权限；
导出默认类应用程序扩展组件{
状态={
位置：空，
errorMessage:null，
};
_getLocationAsync=async（）=>{
让{status}=wait Permissions.askAsync（Permissions.LOCATION）；
如果（状态！=“已授予”）{
这是我的国家({
errorMessage:'访问位置的权限被拒绝'，
});
}
let location=await location.getCurrentPositionAsync（{}）；
this.setState（{location}）；
};
componentDidMount（）{
if（Platform.OS==='android'&&！Constants.isDevice）{
这是我的国家({
errorMessage:“哦，这在Android模拟器中的草图上不起作用。请在您的设备上试用！”，
});
}否则{
setInterval（this.\u getLocationAsync.bind（this），2000）；
}
}
渲染（）{
让text='Waiting..'；
if（this.state.errorMessage）{
text=this.state.errorMessage；
}else if（this.state.location）{
text=JSON.stringify（this.state.location）；
}
返回(
{text}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
},
第段：{
差额：24，
尺码：18，
textAlign:'中心'，
},
});
您为什么不使用？我正在尝试做完全相同的事情，希望有人回答这个问题。代码只获得一次坐标，然后再也不会updates@Bisclavret我不知道为什么它不起作用。我修复了这个问题，只需在obj-c中编写代码来获取位置，然后将数据发送到react Native为什么不使用？我正在尝试做完全相同的事情，希望有人回答这个问题。代码只获得一次坐标，然后再也不会updates@Bisclavret我不知道为什么它不起作用。我通过在obj-c中纯粹编写代码来获得位置，然后将数据发送到react native解决了这个问题