web-dev-qa-db-fra.com

Comment demander l'autorisation pour l'emplacement du périphérique Android dans React Native au moment de l'exécution?

J'ai essayé d'utiliser la géolocalisation de React Native pour une application Android. Le module mal documenté se trouve ici https://facebook.github.io/react-native/docs/geolocation.html . Selon la documentation, vous gérez les autorisations de localisation sur Android à l'aide du code suivant dans le fichier AndroidManifest.xml

<uses-permission Android:name="Android.permission.ACCESS_FINE_LOCATION" />

Cependant, mes recherches en ligne suggèrent que la ligne de code ci-dessus est inutile pour les versions d'Android> = 6.0

Mon implémentation de GeoLocation ne fonctionnant pas actuellement, je n’ai aucune autre raison que de croire que les autorisations d’emplacement ne sont pas correctement gérées.

Comment demander avec succès l'autorisation de localisation au moment de l'exécution pour React Native Android App? Merci d'avance!

androidreact-nativepermissionsgeolocation
14
jungleMan

Cela n'a pas fonctionné pour moi

if (granted === PermissionsAndroid.RESULTS.GRANTED) {
}

J'ai fait référence à https://facebook.github.io/react-native/docs/permissionsandroid.html#request Et check () retournent un booléen 

const granted = await PermissionsAndroid.check( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION );

if (granted) {
  console.log( "You can use the ACCESS_FINE_LOCATION" )
} 
else {
  console.log( "ACCESS_FINE_LOCATION permission denied" )
}
11
Jan

Je l'ai résolu en modifiant la targetSdkVersion (identique à compileSdkVersion, dans mon cas 23) dans Android/app/build.gradle.

Editez AndroidManifest.xml situé dans Android/src/main et ajoutez le 

   <uses-permission Android:name="Android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission Android:name="Android.permission.ACCESS_COARSE_LOCATION"/>

//suivant : 

 import { PermissionsAndroid } from 'react-native';

// puis ajoutez cette méthode: 

export async function requestLocationPermission() 
{
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        'title': 'Example App',
        'message': 'Example App access to your location '
      }
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the location")
      alert("You can use the location");
    } else {
      console.log("location permission denied")
      alert("Location permission denied");
    }
  } catch (err) {
    console.warn(err)
  }
}

// et accéder à la méthode lorsque vous demandez l'emplacement au moment de l'exécution 

   async componentWillMount() {
    await requestLocationPermission()
    }
13
Jagadeesh

Vous pouvez utiliser les autorisations natives de réactionAndroid pour demander la permission: https://facebook.github.io/react-native/docs/permissionsandroid.html#request

Ou, une option plus simple consiste à utiliser une bibliothèque qui le fait pour vous, telle que https://github.com/yonahforst/react-native-permissions

3
egisp

Voici mon code pour trouver l'emplacement actuel dans Android et IOS avec autorisation

Pour Android :

Vous devez ajouter l'autorisation suivante dans le fichier Android AndroidManifest.xml

Pour IOS Vous devez inclure la clé NSLocationWhenInUseUsageDescription dans Info.plist pour activer la géolocalisation lors de l'utilisation de l'application. La géolocalisation est activée par défaut lorsque vous créez un projet avec react-native init.

Voici le code pour trouver l'emplacement actuel (latitude et longitude):


//This is an example code to get Geolocation// 

import React from 'react';
//import react in our code. 

import {View, Text,  StyleSheet, Image ,PermissionsAndroid,Platform} from 'react-native';
//import all the components we are going to use.

export default class App extends React.Component {
    state = {
        currentLongitude: 'unknown',//Initial Longitude
        currentLatitude: 'unknown',//Initial Latitude
    }
    componentDidMount = () => {
        var that =this;
        //Checking for the permission just after component loaded
        if(Platform.OS === 'ios'){
            this.callLocation(that);
        }else{
            async function requestCameraPermission() {
                try {
                    const granted = await PermissionsAndroid.request(
                        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,{
                            'title': 'Location Access Required',
                            'message': 'This App needs to Access your location'
                        }
                    )
                    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                        //To Check, If Permission is granted
                        that.callLocation(that);
                    } else {
                        alert("Permission Denied");
                    }
                } catch (err) {
                    alert("err",err);
                    console.warn(err)
                }
            }
            requestCameraPermission();
        }    
    }
    callLocation(that){
        //alert("callLocation Called");
        navigator.geolocation.getCurrentPosition(
            //Will give you the current location
            (position) => {
                const currentLongitude = JSON.stringify(position.coords.longitude);
                //getting the Longitude from the location json
                const currentLatitude = JSON.stringify(position.coords.latitude);
                //getting the Latitude from the location json
                that.setState({ currentLongitude:currentLongitude });
                //Setting state Longitude to re re-render the Longitude Text
                that.setState({ currentLatitude:currentLatitude });
                //Setting state Latitude to re re-render the Longitude Text
            },
            (error) => alert(error.message),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );
        that.watchID = navigator.geolocation.watchPosition((position) => {
            //Will give you the location on location change
            console.log(position);
            const currentLongitude = JSON.stringify(position.coords.longitude);
            //getting the Longitude from the location json
            const currentLatitude = JSON.stringify(position.coords.latitude);
            //getting the Latitude from the location json
            that.setState({ currentLongitude:currentLongitude });
            //Setting state Longitude to re re-render the Longitude Text
            that.setState({ currentLatitude:currentLatitude });
            //Setting state Latitude to re re-render the Longitude Text
        });
    }
    componentWillUnmount = () => {
        navigator.geolocation.clearWatch(this.watchID);
    }
    render() {
        return (
            <View style = {styles.container}>
                <Image
                    source={{uri:'https://png.icons8.com/dusk/100/000000/compass.png'}}
                    style={{width: 100, height: 100}}
                />
                <Text style = {styles.boldText}>
                    You are Here
                </Text>
                <Text style={{justifyContent:'center',alignItems: 'center',marginTop:16}}>
                    Longitude: {this.state.currentLongitude}
                </Text>
                <Text style={{justifyContent:'center',alignItems: 'center',marginTop:16}}>
                    Latitude: {this.state.currentLatitude}
                </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create ({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent:'center',
        marginTop: 50,
        padding:16,
        backgroundColor:'white'
    },
    boldText: {
        fontSize: 30,
        color: 'red',
    }
})
2
snehal agrawal

Vous pouvez demander la permission d'emplacement en utilisant le code suivant 

try {
     const granted = await PermissionsAndroid.request(
       PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
     )
     if (granted === PermissionsAndroid.RESULTS.GRANTED) {
       alert("You can use the location")
     } else {
       alert("Location permission denied")
     }
   } catch (err) {
     console.warn(err)
   }
   alert('hi');
1
Rajneesh Shukla

J'ai remarqué deux choses:

  1. Vous devez changer compileSdkVersion 23 dans le fichier build.gradle
  2. Vous devez ajouter le listener de clic de votre View pour l'afficher dans la boîte de dialogue Permission.

Exemple de code:

import React, { Component } from 'react';
import { Text, PermissionsAndroid, Alert } from 'react-native';

export default class RuntimePermissionSample extends React.Component {

    constructor(props) {
        super(props);
    }

    async requestLocationPermission() {
        const chckLocationPermission = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
        if (chckLocationPermission === PermissionsAndroid.RESULTS.GRANTED) {
            alert("You've access for the location");
        } else {
            try {
                const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                    {
                        'title': 'Cool Location App required Location permission',
                        'message': 'We required Location permission in order to get device location ' +
                            'Please grant us.'
                    }
                )
                if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                    alert("You've access for the location");
                } else {
                    alert("You don't have access for the location");
                }
            } catch (err) {
                alert(err)
            }
        }
    };

    render() {
        return (
            <Text
                onPress={() => this.requestLocationPermission()}>
                Request Location Permission
            </Text>
        )
    }
}

J'espère que cela vous aiderait.

0
Hiren Patel

Cela a fonctionné pour moi

 async requestCameraPermission() {
try {
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
  )
  if (granted === PermissionsAndroid.RESULTS.GRANTED) {
    this.props.navigation.navigate("MapScreen")
  } else {
    alert("Camera permission denied")
  }
} catch (err) {
  console.warn(err)
  }
}
0
Nick.K