درخواست Permissions بصورت Runtime در React Native

سیستم عامل Android برای دسترسی به بعضی اطلاعات انتخاب را در اختیار کاربر قرار داده است تا کاربر احساس امنیت کند و مطمئن باشد که اطلاعاتش بدون اجازه دسترسی در اختیار اپلیکیشن و برنامه ای قرار نمیگیرد.بعضی از دسترسی هایی را توسعه دهنده نرم افزار باید به صورت مستقیم از کاربر اجازه دسترسی بگیرد مثل موقعیت(location)،دسترسی به دوربین ، دسترسی به storage ،دسترسی به مخاطبین و خیلی موارد دیگه.در این آموزش متنی قصد داریم یاد بگیریم که چجوری در React Native به صورت Runtime درخواست دسترسی به کاربر بدیم.

نکته : توجه کنید که در نسخه های Android Marshmallow یا 6 یا API Level 23 به بالا بصورت مستقیم باید از کاربر اجازه دسترسی گرفت . در نسخه های پایین تر بصورت اتوماتیک اجازه دسترسی داده میشود.در اینجا میتونید لیستی از permissions در Android رو مشاهده کنید.

1.در اولین گام برای اجازه دسترسی باید فایل AndroidManifest.xml رو از مسیر YourReactNativeProject-> android -> app -> src -> main -> AndroidManifest.xml باز کنیم.در این آموزش متنی ما اجازه دسترسی به موقعیت ACCESS_FINE_LOCATION رو در فایل AndroidManifest.xml اضافه میکنیم.

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

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

2.در این مرحله باید android:minSdkVersion و android:targetSdkVersion رو در فایل AndroidManifest.xml مشخص کنیم.توجه کنید که این مرحله خیلی مهمه.

<uses-sdk android:minSdkVersion="16"
          android:targetSdkVersion="23"
           />

<uses-sdk android:minSdkVersion="16"

android:targetSdkVersion="23"

فایل AndroidManifest.xml بعد از اضافه کردن کدهای بالا

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.newproject">
 
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
 
 <uses-sdk android:minSdkVersion="16"
          android:targetSdkVersion="23"
           />
 
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
 <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
 
 
</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.newproject">

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

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

<uses-sdk android:minSdkVersion="16"

android:targetSdkVersion="23"

<application

android:name=".MainApplication"

android:label="@string/app_name"

android:icon="@mipmap/ic_launcher"

android:allowBackup="false"

android:theme="@style/AppTheme">

<activity

android:name=".MainActivity"

android:label="@string/app_name"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

android:windowSoftInputMode="adjustResize">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

3.فایل YourReactNativeProject -> android -> app -> build.gradle رو باز کنید و targetSdkVersion رو 23 قرار بدید.

4.فایل App.js رو باز کنید و کامپوننت های Platform, StyleSheet, View, PermissionsAndroid, Text و Alert رو ایمپورت کنید.

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

import React, { Component } from 'react';

import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert } from 'react-native';

5.ایجاد یک Async function با نام request_location_runtime_permission() بصورت export در کلاس اصلی.از این تابع برای اجازه دسترسی به موقعیت استفاده میشود.

export async function request_location_runtime_permission() {
 
 
 
 
}

export async function request_location_runtime_permission() {

}

6.ایجاد یک بلاک try and catch برای مدیریت exception ها زمانی که ما نیاز به فرستادن درخواست برای اجازه دسترسی داریم.همونطورکه در تیکه کد پایین مشاهده میکنید یک متغیر به نام granted از نوع const تعریف کردیم که نتیجه رو بعد از enabling و disabling در اون ذخیره میکنیم.

export async function request_location_runtime_permission() {
 
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        'title': 'ReactNativeCode Location Permission',
        'message': 'ReactNativeCode App needs access to your location '
      }
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/react-native-create-app-intro-slider-welcome-walk-through-screen/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div class="postImageUrl" style="background-image:url(https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/react-native-1700x800-1-300x162.png);"></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">آموزش React Native - ایجاد اسلایدر خوشامدگویی</div></div></div><div class="ctaButton"></div></div></a></div> 
      Alert.alert("Location Permission Granted.");
    }
    else {
 
      Alert.alert("Location Permission Not Granted");
 
    }
  } catch (err) {
    console.warn(err)
  }
}

export async function request_location_runtime_permission() {

try {

const granted = await PermissionsAndroid.request(

PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,

{

'title': 'ReactNativeCode Location Permission',

'message': 'ReactNativeCode App needs access to your location '

}

)

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

Alert.alert("Location Permission Granted.");

}

else {

Alert.alert("Location Permission Not Granted");

}

} catch (err) {

console.warn(err)

}

7.ایجاد یک کلاس به نام App .کلاس اصلی ما App خواهد بود .در LifeCycle componentDidMount ما تابع request_location_runtime_permission رو فراخوانی میکنیم. componentDidMount باید بصورت async تعریف شود تا بتونیم async function رو فراخوانی کنیم.

export default class App extends Component {
 
  async componentDidMount() {
 
    await request_location_runtime_permission()
 
  }
 
  render() {
 
    return (
 
      <View style={styles.MainContainer}>
 
        <Text>React Native Runtime Permission Request</Text>
 
      </View>
 
    );
  }
}

export default class App extends Component {

async componentDidMount() {

await request_location_runtime_permission()

}

render() {

return (

<Text>React Native Runtime Permission Request</Text>

</View>

);

}

8.ایجاد استایل اختصاصی

const styles = StyleSheet.create({
 
  MainContainer: {
 
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    justifyContent: 'center',
    margin: 20
 
  }
 
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: (Platform.OS) === 'ios' ? 20 : ,

justifyContent: 'center',

margin: 20

}

});

9.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert } from 'react-native';
 
export async function request_location_runtime_permission() {
 
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        'title': 'ReactNativeCode Location Permission',
        'message': 'ReactNativeCode App needs access to your location '
      }
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
 
      Alert.alert("Location Permission Granted.");
    }
    else {
 
      Alert.alert("Location Permission Not Granted");
 
    }
  } catch (err) {
    console.warn(err)
  }
}
 
export default class App extends Component {
 
  async componentDidMount() {
 
    await request_location_runtime_permission()
 
  }
 
  render() {
 
    return (
 
      <View style={styles.MainContainer}>
 
        <Text>React Native Runtime Permission Request</Text>
 
      </View>
 
    );
  }
}
 
const styles = StyleSheet.create({
 
  MainContainer: {
 
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    justifyContent: 'center',
    margin: 20
 
  }
 
});

import React, { Component } from 'react';

import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert } from 'react-native';

export async function request_location_runtime_permission() {

try {

const granted = await PermissionsAndroid.request(

PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,

{

'title': 'ReactNativeCode Location Permission',

'message': 'ReactNativeCode App needs access to your location '

}

)

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

Alert.alert("Location Permission Granted.");

}

else {

Alert.alert("Location Permission Not Granted");

}

} catch (err) {

console.warn(err)

}

export default class App extends Component {

async componentDidMount() {

await request_location_runtime_permission()

}

render() {

return (

<Text>React Native Runtime Permission Request</Text>

</View>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: (Platform.OS) === 'ios' ? 20 : ,

justifyContent: 'center',

margin: 20

}

});

اسکرین شات:

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

amirfarahani10 گفت:

نوامبر 10, 2020 در 12:06 ب.ظ

سلام اقا این اموزش رو میشه برای functiola components ها بذارید
ممنون

پاسخ
- علی گفت:
  
  نوامبر 14, 2020 در 12:16 ب.ظ
  
  درود بر شما در آینده ای نزدیک بروزرسانی های فوق العاده ای در رابطه با محتوای react native انجام خواهد شد. موفق باشید
  
  پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ