> 웹 프론트엔드 > JS 튜토리얼 > 네이티브 개발자의 반응을 돕는 스크립트

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

WBOY
풀어 주다: 2024-09-07 06:36:32
원래의
658명이 탐색했습니다.

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

읽어주셔서 감사합니다!

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

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿