The react – native – the location profile

  • React Native is a third-party component for getting a phone’s location
  • The official reference

The installation

npm install --save react-native-location
or
yarn add react-native-location

Copy the code

Link libraries

  • android/settings.gradle
include ':react-native-location' project(':react-native-location').projectDir = new File(rootProject.projectDir, '.. /node_modules/react-native-location/android')Copy the code
  • android/app/build.gradle
dependencies {
   ...
   implementation project(':react-native-location')
}

Copy the code
  • Android/app/SRC/main /… /MainApplication.javaThis step is not necessary if your React Native version is high.

    On top, where imports are:
import com.github.reactnativecommunity.location.RNLocationPackage;

Copy the code

Add the RNLocationPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new RNLocationPackage()
    );
}

Copy the code

Access configuration

  • Path Android \app\ SRC \main\ Androidmanifest. XML Android manifest permissions You need to ensure that your AndroidManifest.xml contains this line:

If you want to access fine location then you should also include: ### Example “`js import React, {Component} from ‘react’; import { Platform, PermissionsAndroid, View, Button, Text } from ‘react-native’; import RNLocation from ‘react-native-location’;

RNLocation.configure({

distanceFilter: 5.0,

});

Export Default class TestGeo extends Component {state={longitude: ‘, latitude: ‘, Timestamp: ‘ ‘} / / access permissions async componentDidMount () {if (Platform. = = = ‘android OS) {PermissionsAndroid. Request ( PermissionsAndroid. PERMISSIONS. ACCESS_FINE_LOCATION, {title: “Contacts”, the message: ‘This app would like to view your contacts.’,},). Then ((res) => {console.log(res); }); } else { console.log(1111111); }}

getPositions = () => { RNLocation.subscribeToLocationUpdates((res) => { console.log(res); this.setState({longitude : Res [0] [‘ longitude]}) enclosing setState ({latitude: res [0] [‘ latitude]}) enclosing setState ({timestamp: Res [0] [‘ timestamp]}) / / “speed:” + location. The coords. Speed + / / “\ n longitude:” + location. The coords. Longitude + / / “\ n latitude: “+ location.coords.latitude + //” \n accuracy: “+ location.coords.accuracy + //” \n direction: “+ location.coords. Heading + //” \n altitude: “+ location.coords. Altitude + //” \n altitude accuracy: “+ location. Coords. AltitudeAccuracy + / /” \ n the timestamp: “+ location. The timestamp.

});

Copy the code

};

render() {

return (

{this.state.longitude}

{this.state.latitude}

{this.state.timestamp}

); }}