كيف أستدعي الكاميرا وماسح QRCode في رياكت نيتف وإضافة الصلاحيات

  بتاريخ On 2‏/6‏/2022 at 11:40 قال Mohamed Lamin Mahmoudi:

حاولت ذلك، ظهر لي خطأ، أرجو الإطلاع على الصورة المرفقة.

أظهر المزيد  

من الواضح أنك وضعت المفتاح بطريقة خطأ،

أرجو اتباع هذه الخطوات:

• expo camera مكون جاهز يمكنك استعماله
• وفيها خاصية onBarCodeScanned لقراءة رمز الاستجابة السريعة

{
  "expo": {
    "name": "appname",
    "slug": "appslug",
    "privacy": "unlisted",
    "sdkVersion": "32.0.0",
    "platforms": [ "ios", "android" ],
    "version": "2.0.36",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#FFFFFF"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [ "**/*" ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "gl.js.app",
      "infoPlist": {
        "NSCameraUsageDescription": "This app uses the camera to let user put a photo in his profile page."
      }
    },
    "android": {
      "package": "gl.js.app",
      "permissions": [ "CAMERA", "WRITE_EXTERNAL_STORAGE", "CAMERA_ROLL" ],
      "versionCode": 36
    }
  }
}

لاحظ الصلاحيات لأندرويد

    "android": {
      "package": "gl.js.app",
      "permissions": [ "CAMERA", "WRITE_EXTERNAL_STORAGE", "CAMERA_ROLL" ],
      "versionCode": 36
    }

لاستخدام الكاميرا يجب تثبيت مكتبة react-native-camera ضمن مشروعك عبر تنفيذ الأمر التالي:

npm i react-native-camera

وإذا كنت تستخدم إصدار react-native أقل من 0.60 يجب تنفيذ أمر ربط الوحدات الأصلية Native التالي:

react-native link react-native-camera

  بتاريخ On 1‏/6‏/2022 at 12:51 قال Hassan Hedr:

لاستخدام الكاميرا يجب تثبيت مكتبة react-native-camera ضمن مشروعك عبر تنفيذ الأمر التالي:

npm i react-native-camera

وإذا كنت تستخدم إصدار react-native أقل من 0.60 يجب تنفيذ أمر ربط الوحدات الأصلية Native التالي:

react-native link react-native-camera

 

أظهر المزيد  

ثبت مكتبة react-native-camra لكن عندما أستدعي المكونات 

import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

تظهر الاخطاء التالية

  بتاريخ On 1‏/6‏/2022 at 13:18 قال Mohamed Lamin Mahmoudi:

ثبت مكتبة react-native-camra لكن عندما أستدعي المكونات 

import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

تظهر الاخطاء التالية

أظهر المزيد  

يجب إجراء ربط الوحدات الأصلية Native Modules بشكل صحيح مع ملفات أندرويد أو IOS بحسب التطبيق الذي تستخدمه، اتبع خطوات تثبيت المكتبة ضمن الملفات الأصلية للتطبيق بحسب استخدامك والنسخ التي لديك.

  بتاريخ On 1‏/6‏/2022 at 13:22 قال Hassan Hedr:

يجب إجراء ربط الوحدات الأصلية Native Modules بشكل صحيح مع ملفات أندرويد أو IOS بحسب التطبيق الذي تستخدمه، اتبع خطوات تثبيت المكتبة ضمن الملفات الأصلية للتطبيق بحسب استخدامك والنسخ التي لديك.

أظهر المزيد  

أنا أستخدم React native إصدار أكبر من 60 لكن عندما أحاول تنفيذ الأمر 

npm install react-native-camera --save

تظهر هذه المشاكل 

  بتاريخ On 1‏/6‏/2022 at 14:31 قال Mohamed Lamin Mahmoudi:

تظهر هذه المشاكل 

أظهر المزيد  

حاول عمل npm update 

  بتاريخ On 1‏/6‏/2022 at 16:21 قال Wael Aljamal:

حاول عمل npm update 

أظهر المزيد  

دائما ماأواجه مشاكل عند إستعمال npm  كل المكتبات ثبتها باستعمال yarn

  بتاريخ On 1‏/6‏/2022 at 17:43 قال Mohamed Lamin Mahmoudi:

دائما ماأواجه مشاكل عند إستعمال npm  كل المكتبات ثبتها باستعمال yarn

أظهر المزيد  

في حال التثبيت من yarn يمكنك تحديثهم منها أيضاً yarn upgrade في مسار مشروعك

  بتاريخ On 1‏/6‏/2022 at 17:48 قال Wael Aljamal:

في حال التثبيت من yarn يمكنك تحديثهم منها أيضاً yarn upgrade في مسار مشروعك

أظهر المزيد  

مازال نفس الخطأ عندما أستدعي QRCodeScanner

  بتاريخ On 1‏/6‏/2022 at 18:11 قال Mohamed Lamin Mahmoudi:

مازال نفس الخطأ عندما أستدعي QRCodeScanner

أظهر المزيد  

ما هي المنصة التي تشغل الاطبيق عليها؟

حاول عمل expo upgrade

  بتاريخ On 1‏/6‏/2022 at 18:18 قال Wael Aljamal:

ما هي المنصة التي تشغل الاطبيق عليها؟

حاول عمل expo upgrade

أظهر المزيد  

أشغله على تطبيق Expo Go

  بتاريخ On 1‏/6‏/2022 at 18:22 قال Mohamed Lamin Mahmoudi:

أشغله على تطبيق Expo Go

أظهر المزيد  

  بتاريخ On 1‏/6‏/2022 at 18:22 قال Mohamed Lamin Mahmoudi:

أشغله على تطبيق Expo Go

 

أظهر المزيد  

  بتاريخ On 1‏/6‏/2022 at 18:22 قال Mohamed Lamin Mahmoudi:

أشغله على تطبيق Expo Go

أظهر المزيد  

لاحظ أن الخطأ بسبب مشكلة صلاحية، 

توجه إلى المسار android/app/src/main/AndroidManifest.xml

ثم أضف الصلاحيات الخاصة بالكاميرا (أول سطر ضروري فقط) 

<!-- Required -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Include this only if you are planning to use the camera roll -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Include this only if you are planning to use the microphone for video recording -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

وفي الملف

android/app/build.gradle:

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

والتحقق أن

JDK >= 1.7 and your buildToolsVersion >= 25.0.2

 jitpack added في الملف android/build.gradle
^^^^^^^^


allprojects {
    repositories {
        maven { url "https://www.jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}

هذا حسب التوثيق، جميع الأمور مذكورة (تابع جميع أجزاء أندرويد)

  بتاريخ On 1‏/6‏/2022 at 22:35 قال Wael Aljamal:

لاحظ أن الخطأ بسبب مشكلة صلاحية، 

توجه إلى المسار android/app/src/main/AndroidManifest.xml

ثم أضف الصلاحيات الخاصة بالكاميرا (أول سطر ضروري فقط) 

<!-- Required -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Include this only if you are planning to use the camera roll -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Include this only if you are planning to use the microphone for video recording -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

وفي الملف

android/app/build.gradle:

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

والتحقق أن

JDK >= 1.7 and your buildToolsVersion >= 25.0.2

 jitpack added في الملف android/build.gradle
^^^^^^^^


allprojects {
    repositories {
        maven { url "https://www.jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}

هذا حسب التوثيق، جميع الأمور مذكورة (تابع جميع أجزاء أندرويد)

أظهر المزيد  

أنا أعمل  على إطار عمل react native ومحرر أكواد visual studio ولاأعمل على android studio 

هذه المسارات التي ذكرتها لاتواجد عندي 

  بتاريخ On 2‏/6‏/2022 at 09:35 قال Mohamed Lamin Mahmoudi:

أنا أعمل  على إطار عمل react native ومحرر أكواد visual studio ولاأعمل على android studio 

هذه المسارات التي ذكرتها لاتواجد عندي 

أظهر المزيد  

صحيح، إن expo يقوم بتوليد هذه الملفات لاحقاً، أي طريقة بناء المشروع وهرميته مختلفة قليلاً،

يمكنك إضافة الصلاحيات Permissions من خلال app.json ضمن تطبيقات EXPO و التوثيق التالي يشرح الأمر

• expo permissions #android
• expo config permissions

حيث أن الطريقة هي عمل مفتاح ضمن app.json بقيمة permissions ونمرر لها مصفوفة بالصلاحيات التي نحتاجها

{
	permissions: [ "CAMERA", "ACCESS_FINE_LOCATION" ]
}

حاولت ذلك، ظهر لي خطأ، أرجو الإطلاع على الصورة المرفقة.

  بتاريخ On 2‏/6‏/2022 at 11:31 قال Wael Aljamal:

صحيح، إن expo يقوم بتوليد هذه الملفات لاحقاً، أي طريقة بناء المشروع وهرميته مختلفة قليلاً،

يمكنك إضافة الصلاحيات Permissions من خلال app.json ضمن تطبيقات EXPO و التوثيق التالي يشرح الأمر

• expo permissions #android
• expo config permissions

حيث أن الطريقة هي عمل مفتاح ضمن app.json بقيمة permissions ونمرر لها مصفوفة بالصلاحيات التي نحتاجها

{
	permissions: [ "CAMERA", "ACCESS_FINE_LOCATION" ]
}

 

أظهر المزيد