네이티브 개발자의 반응을 돕는 스크립트

안녕하세요!

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
   

   변경한 후 터미널을 다시 시작하거나 source ~/.zshrc(또는 source ~/.bash_profile)를 실행하세요.

2. Watchman 오류: 때로는 Facebook의 파일 감시 서비스인 Watchman이 오래된 파일 캐시 문제를 일으킬 수 있습니다. 이 문제를 해결하려면 다음을 실행하세요.
   

   watchman watch-del-all
   

   그런 다음 React Native 서버를 다시 시작하세요.

3. adb를 localhost에 역방향으로 연결: 앱이 Android 에뮬레이터 내에서 localhost에 연결할 수 없는 경우 다음을 실행해야 할 수 있습니다.
   

   adb reverse tcp:8081 tcp:8081
   

   이 명령은 에뮬레이터에서 로컬 시스템으로 트래픽을 라우팅합니다. 터미널에서 adb에 액세스할 수 있는지 확인하세요.

4. 캐시 지우고 다시 빌드: 여전히 문제가 발생하면 캐시를 지우고 프로젝트를 다시 빌드해 보세요.
   

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

   그런 다음 React Native 앱을 다시 실행하세요.

5. react-native run-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를 동시에 실행할 수 있습니다.

읽어주셔서 감사합니다!

위 내용은 네이티브 개발자의 반응을 돕는 스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!