web-dev-qa-db-ja.com

実行時にAndroid NativeのReact Device Locationの許可をリクエストするにはどうすればよいですか？

React NativeのGeoLocalisationをAndroidアプリに使用しようとしています。不十分に文書化されたモジュールはここにあります https://facebook.github.io/react-native/docs/geolocation.html 。ドキュメントによると、AndroidManifest.xmlファイルで次のコードを使用して、Androidの場所のアクセス許可を処理します。

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

ただし、私のオンライン調査では、上記のコード行はAndroid> = 6.0のバージョンには役に立たないことが示唆されています。

現在、GeoLocationの実装は機能していないため、他の理由はありませんが、場所のアクセス許可が正しく処理されないと考えています。

React Native Android Appの実行時に場所の許可を正常に要求するにはどうすればよいですか？前もって感謝します ！

androidreact-nativepermissionsgeolocation
18
jungleMan

これは私にはうまくいきませんでした

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

https://facebook.github.io/react-native/docs/permissionsandroid.html#request を参照し、check（）はブール値を返します

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" )
}
15
Jan

Android/app/build.gradleのtargetSdkVersion（私の場合は23のcompileSdkVersionと同じ）を変更することで解決しました。

Android/src/mainにあるAndroidManifest.xmlを編集して、

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

//次 ：

 import { PermissionsAndroid } from 'react-native';

//そして、このメソッドを追加します：

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)
  }
}

//実行時に場所をリクエストするとメソッドにアクセスします

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

AndroidとIOSの両方で現在の場所を許可するコードを次に示します

Androidの場合：

Android AndroidManifest.xmlファイルに次の権限を追加する必要があります

IOSの場合 NSLocationWhenInUseUsageDescriptionキーをInfo.plistに含めて、アプリの使用時に位置情報を有効にする必要があります。反応ネイティブinitでプロジェクトを作成すると、デフォルトで位置情報が有効になります。

現在の場所（緯度と経度）を見つけるコードは次のとおりです。


//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',
    }
})
4
snehal agrawal

反応ネイティブPermissionsAndroidを使用して、許可をリクエストできます： https://facebook.github.io/react-native/docs/permissionsandroid.html#request

または、より簡単なオプションは、 https://github.com/yonahforst/react-native-permissions のようなライブラリを使用することです。

3
egisp

次のコードを使用して場所の許可を求めることができます

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');
2
Rajneesh Shukla

私は2つのことに気づきました：

  1. compileSdkVersion 23ファイルのbuild.gradleを変更する必要があります
  2. ビューのクリックリスナーを追加して、Permission dialogに表示する必要があります。

サンプルコード：

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>
        )
    }
}

これがあなたのお役に立てば幸いです。

1
Hiren Patel

これは私のために働いた

 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