درخواست 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 اضافه میکنیم.
1 | <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> |
2.در این مرحله باید android:minSdkVersion و android:targetSdkVersion رو در فایل AndroidManifest.xml مشخص کنیم.توجه کنید که این مرحله خیلی مهمه.
1 2 3 | <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="23" /> |
فایل AndroidManifest.xml بعد از اضافه کردن کدهای بالا
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <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> |
3.فایل YourReactNativeProject -> android -> app -> build.gradle رو باز کنید و targetSdkVersion رو 23 قرار بدید.
4.فایل App.js رو باز کنید و کامپوننت های Platform, StyleSheet, View, PermissionsAndroid, Text و Alert رو ایمپورت کنید.
1 2 3 | import React, { Component } from 'react'; import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert } from 'react-native'; |
5.ایجاد یک Async function با نام request_location_runtime_permission() بصورت export در کلاس اصلی.از این تابع برای اجازه دسترسی به موقعیت استفاده میشود.
1 2 3 4 5 6 | export async function request_location_runtime_permission() { } |
6.ایجاد یک بلاک try and catch برای مدیریت exception ها زمانی که ما نیاز به فرستادن درخواست برای اجازه دسترسی داریم.همونطورکه در تیکه کد پایین مشاهده میکنید یک متغیر به نام granted از نوع const تعریف کردیم که نتیجه رو بعد از enabling و disabling در اون ذخیره میکنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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 رو فراخوانی کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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> ); } } |
8.ایجاد استایل اختصاصی
1 2 3 4 5 6 7 8 9 10 11 12 | const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, justifyContent: 'center', margin: 20 } }); |
9.کد کامل برنامه در فایل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 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 } }); |
اسکرین شات:
ممکن است همچنین دوست داشته باشید
تشخیص حالت Background در اپلیکیشن های react native
بازنویسی کامپوننت های React Native با ++c برای ویندوز توسط مایکروسافت
