أهلاً!

إذا كنت تعمل مع React Native، فمن المحتمل أنك واجهت مشكلات في المحاكي. تقوم بتشغيل أمر React Native، ولكن لم يتم اكتشاف المحاكي. حتى بعد تعيين كافة متغيرات البيئة الضرورية في ملف .zshrc أو .bash_profile أو الملفات المشابهة، فإنه لا يزال لا يعمل.

إليك بعض المشاكل والإصلاحات الشائعة:

1. لم يتم العثور على المحاكي: يمكن أن يحدث هذا إذا لم يتم تعيين مسار Android SDK بشكل صحيح. تحقق جيدًا من أن متغيرات البيئة ANDROID_HOME وPATH تشير إلى الأدلة الصحيحة. يمكنك إضافة هذه السطور إلى ملفك الشخصي .zshrc أو .bash_profile:
   

   export ANDROID_HOME=$HOME/Library/Android/sdk
   export PATH=$PATH:$ANDROID_HOME/emulator
   export PATH=$PATH:$ANDROID_HOME/tools
   export PATH=$PATH:$ANDROID_HOME/tools/bin
   export PATH=$PATH:$ANDROID_HOME/platform-tools
   

   بعد إجراء هذه التغييرات، أعد تشغيل جهازك الطرفي أو قم بتشغيل المصدر ~/.zshrc (أو المصدر ~/.bash_profile).

2. أخطاء Watchman: في بعض الأحيان، Watchman - خدمة مشاهدة الملفات على Facebook - يمكن أن تسبب مشكلات في ذاكرة التخزين المؤقت للملفات القديمة. لإصلاح ذلك، قم بتشغيل:
   

   watchman watch-del-all
   

   ثم أعد تشغيل خادم React Native.

3. adb reverse to Connect to localhost: إذا لم يتمكن تطبيقك من الاتصال بالمضيف المحلي من داخل محاكي Android، فقد تحتاج إلى تشغيل:
   

   adb reverse tcp:8081 tcp:8081
   

   يقوم هذا الأمر بتوجيه حركة المرور من المحاكي إلى جهازك المحلي. تأكد من إمكانية الوصول إلى adb من جهازك الطرفي.

4. مسح ذاكرة التخزين المؤقت وإعادة الإنشاء: إذا كنت لا تزال تواجه مشكلات، فحاول مسح ذاكرة التخزين المؤقت وإعادة بناء المشروع:
   

   npm start -- --reset-cache
   cd android && ./gradlew clean
   cd ios && xcodebuild clean
   

   ثم قم بتشغيل تطبيق React Native مرة أخرى.

5. استخدام نظام التشغيل android أو run-ios التفاعلي المباشر: إذا لم يبدأ المحاكي بشكل صحيح من IDE أو الجهاز الطرفي، فحاول تشغيل التطبيق مباشرة باستخدام:
   

   npx react-native run-android
   npx react-native run-ios
   

قد يكون تصحيح هذه المشكلات أمرًا محبطًا، ولكن هذه الخطوات ساعدتني في حل العديد من المشكلات الشائعة.

لقد قمت بإنشاء برنامج نصي سهل الاستخدام أيضًا

const {spawn, exec} = require('child_process');
const path = require('path');

// Define paths
const projectPath = path.resolve();

// Define commands
const watchDelCommand = `watchman watch-del '${projectPath}'`;
const watchProjectCommand = `watchman watch-project '${projectPath}'`;

// Function to execute commands
const clearWatchman = () => {
  // Execute watch-del command
  exec(watchDelCommand, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error executing watch-del command: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`stderr: ${stderr}`);
      return;
    }
    console.log(`watch-del command executed successfully: ${stdout}`);

    // Execute watch-project command
    exec(watchProjectCommand, (error, stdout, stderr) => {
      if (error) {
        console.error(
          `Error executing watch-project command: ${error.message}`,
        );
        return;
      }
      if (stderr) {
        console.error(`stderr: ${stderr}`);
        return;
      }
      console.log(`watch-project command executed successfully: ${stdout}`);
    });
  });
};

async function reverseAdb() {
  console.log('Running... adb reverse tcp:8080 tcp:8080');
  // After the emulator has started  adb reverse tcp:8080 tcp:8080
  const adbReverse = spawn('adb', ['reverse', 'tcp:8080', 'tcp:8080']);
  await new Promise((resolve, reject) => {
    let output = '';
    adbReverse.stdout.on('data', data => {
      output  = data.toString();
    });
    adbReverse.on('close', () => {
      resolve();
    });
    adbReverse.stderr.on('error', reject);
  }).catch(error => console.error('Error  reversing ADB port to 8080:', error));
}

async function runEmulator() {
  try {
    clearWatchman();
    // Check for running emulator
    const adbDevices = spawn('adb', ['devices']);
    const devices = await new Promise((resolve, reject) => {
      let output = '';
      adbDevices.stdout.on('data', data => {
        output  = data.toString();
      });
      adbDevices.on('close', () => {
        resolve(output.includes('emulator'));
      });
      adbDevices.stderr.on('error', reject);
    });

    if (devices) {
      console.log('Emulator is already running');
      reverseAdb();
      return;
    }

    // Get list of available emulators
    const emulatorList = spawn('emulator', ['-list-avds']);
    const emulatorName = await new Promise((resolve, reject) => {
      let output = '';
      emulatorList.stdout.on('data', data => {
        output  = data.toString();
      });
      emulatorList.on('close', () => {
        const lines = output.split('\n').filter(Boolean); // Filter out empty lines
        if (lines.length === 0) {
          reject(new Error('No AVDs found'));
        } else {
          resolve(lines[lines.length - 1]); // Get the last non-empty line
        }
      });
      emulatorList.stderr.on('error', reject);
    });

    // Start the emulator in detached mode
    const emulatorProcess = spawn('emulator', ['-avd', emulatorName], {
      detached: true,
      stdio: 'ignore',
    });

    emulatorProcess.unref(); // Allow the parent process to exit independently of the child

    reverseAdb();

    console.log(`Starting emulator: ${emulatorName}`);
  } catch (error) {
    console.error('Error running emulator:', error);
  }
}

runEmulator();


// package.json

  "scripts": {
    ...

    "dev:android": "yarn android:emulator && npx react-native@latest start",
    "android:emulator": "node runEmulator.js",

    ...
  },

باستخدام البرنامج النصي أعلاه، يمكنك تشغيل كل من المحاكي وReact Native في وقت واحد.

شكرًا على القراءة!