"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 네이티브 개발자의 반응을 돕는 스크립트

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

2024-11-01에 게시됨
검색:505

A Script To Help React Native Developers

안녕하세요!

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

읽어주셔서 감사합니다!

릴리스 선언문 이 글은 https://dev.to/frulow/a-script-to-help-react-native-developers-fk7?1에서 복제됩니다. 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다.
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3