首頁 > web前端 > js教程 > 主體

幫助 React Native 開發者的腳本

WBOY
發布: 2024-09-07 06:36:32
原創
554 人瀏覽過

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。

感謝您的閱讀!

以上是幫助 React Native 開發者的腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!