React Native Geolocation地理定位 – React Native实战教程

上一章React Native实战教程请查看：React Native Alert组件

在本章中，我们将向您展示如何使用地理定位Geolocation。

步骤1：App.js

import React from 'react';
import GeolocationExample from './geolocation_example.js';

const App = () => {
  return <GeolocationExample />;
};
export default App;

步骤2：地理位置Geolocation

我们将从设置初始状态开始，以保持初始位置和最后位置。

现在，我们需要使用navigator.geolocation.getCurrentPosition来安装组件时获取设备的当前位置。我们将对响应进行字符串化，以便我们更新状态。

navigator.geolocation.watchPosition用于跟踪用户的位置，我们还可以在此步骤中清除观察者。

AsyncStorageExample.js

import React, {Component} from 'react';
import {View, Text, Switch, StyleSheet} from 'react-native';

class SwichExample extends Component {
  state = {
    initialPosition: 'unknown',
    lastPosition: 'unknown',
  };
  watchID: ?number = null;
  componentDidMount = () => {
    navigator.geolocation.getCurrentPosition(
      position => {
        const initialPosition = JSON.stringify(position);
        this.setState({initialPosition});
      },
      error => alert(error.message),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000},
    );
    this.watchID = navigator.geolocation.watchPosition(position => {
      const lastPosition = JSON.stringify(position);
      this.setState({lastPosition});
    });
  };
  componentWillUnmount = () => {
    navigator.geolocation.clearWatch(this.watchID);
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.boldText}>Initial position:</Text>

        <Text>{this.state.initialPosition}</Text>

        <Text style={styles.boldText}>Current position:</Text>

        <Text>{this.state.lastPosition}</Text>
      </View>
    );
  }
}
export default SwichExample;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 50,
  },
  boldText: {
    fontSize: 30,
    color: 'red',
  },
});