«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Скрипт, помогающий React Native разработчикам

Скрипт, помогающий React Native разработчикам

Опубликовано 1 ноября 2024 г.
Просматривать:840

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: Иногда Watchman — служба отслеживания файлов Facebook — может вызывать проблемы с устаревшими кэшами файлов. Чтобы это исправить, запустите:

    watchman watch-del-all
    

    Затем перезапустите сервер React Native.

  3. adb обратное подключение к локальному хосту: если ваше приложение не может подключиться к локальному хосту из эмулятора Android, возможно, вам придется запустить:

    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