」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 幫助 React Native 開發者的腳本

幫助 React Native 開發者的腳本

發佈於2024-11-01
瀏覽:884

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 反向連線至 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]刪除
最新教學 更多>
  • 如何使用 NumPy 的「np.newaxis」在陣列操作中啟用廣播?
    如何使用 NumPy 的「np.newaxis」在陣列操作中啟用廣播?
    NumPy 的'np.newaxis' 是什麼以及如何使用它理解'np.newaxis'NumPy 的“np.newaxis”,也稱為“None”,是一個偽索引,用於臨時向數組添加軸。使用一次時,它將數組的維度增加一。例如,1D 數組變成 2D 數組,2D 數組變成 ...
    程式設計 發佈於2024-11-08
  • React原始碼中MessageChannel的使用
    React原始碼中MessageChannel的使用
    這篇文章我們分析React原始碼中MessageChannel的用法。 我們先來了解什麼是MessageChannel。 訊息頻道 Channel Messaging API 的 MessageChannel 介面允許我們建立一個新的訊息通道並透過它的兩個 MessagePort...
    程式設計 發佈於2024-11-08
  • MySQL 如何處理較短列中的長整數:溢位或截斷?
    MySQL 如何處理較短列中的長整數:溢位或截斷?
    較短列的長整數轉換:機制與公式將長整數插入較短整數列時,MySQL 通常會截斷該值以適合指定的長度。但是,在某些情況下,行為可能會有所不同,從而導致意外的轉換。 考慮一個 10 位長整數列 some_number。如果將超過最大整數範圍 (2147483647) 的值插入到此列中,MySQL 會將該...
    程式設計 發佈於2024-11-08
  • 如何在教義 2 中建立額外欄位的多對多連結表?
    如何在教義 2 中建立額外欄位的多對多連結表?
    Doctrine 2 和額外欄位的多對多連結表本文解決了在Dotrine 2 中建立多對多關係的問題,其中連結表包含一個附加價值,特別是在庫存系統的上下文中。 原則 2 中的多對多關係可以使用不包含任何附加欄位的連結表來建立。但是,當每個連結都需要額外的值時,必須將連結表重新定義為新實體。 提供的程...
    程式設計 發佈於2024-11-08
  • JavaScript 中的單管道運算子如何處理浮點數和整數?
    JavaScript 中的單管道運算子如何處理浮點數和整數?
    探索JavaScript 中單管道運算子的位元性質在JavaScript 中,單一管道運算子(「|」)執行按位運算稱為位元或的運算。理解此操作對於理解其對不同輸入值的影響至關重要,如下例所示:console.log(0.5 | 0); // 0 console.log(-1 | 0); // -1...
    程式設計 發佈於2024-11-08
  • 列表理解和Regae
    列表理解和Regae
    啊。我一直害怕的那一刻。 第一篇文章,包含我自己的想法、觀點和可能的知識細分。 請注意,親愛的讀者,這並不是對 Python 單行 for 循環、追加到列表和返回一些數據的能力的深入探討或令人難以置信的分解。不,不。這只是展示瞭如何有趣——以及如何愚蠢——小東西可以組合在一起,讓...
    程式設計 發佈於2024-11-08
  • 如何解決 WAMP 上由於缺少 Openssl 擴充功能而導致的 Composer 錯誤?
    如何解決 WAMP 上由於缺少 Openssl 擴充功能而導致的 Composer 錯誤?
    Composer 有問題? WAMP 上缺少Openssl 擴充功能嘗試將Composer 合併到WAMP 設定中時,您可能會遇到警告:「The openssl 擴充功能遺失。」此訊息表明,如果沒有此擴充程序,您的系統的安全性和穩定性將會受到影響。 故障排除步驟:您已經認真瀏覽了 WAMP 介面,標...
    程式設計 發佈於2024-11-08
  • 如何解決 Windows 上 PHP 中的 SSL 套接字傳輸問題?
    如何解決 Windows 上 PHP 中的 SSL 套接字傳輸問題?
    解決PHP 中的SSL Socket 傳輸問題在Windows 系統上使用PHP 時,開發人員可能會遇到錯誤「無法連線到ssl: //...”由於啟用“ssl”套接字傳輸存在困難。本文將指導您排除故障並解決此問題,並介紹您迄今為止已採取的具體步驟。 故障排除步驟檢查PHP 設定:確保php_open...
    程式設計 發佈於2024-11-08
  • 為什麼類比滑鼠懸停在 Chrome 中不會觸發 CSS 懸停?
    為什麼類比滑鼠懸停在 Chrome 中不會觸發 CSS 懸停?
    在JavaScript 中模擬滑鼠懸停:澄清差異並實現手動控制嘗試在Chrome 中模擬滑鼠懸停事件時,您可能遇到了一個有趣的問題問題。儘管“mouseover”事件監聽器已成功激活,但相應的CSS“hover”聲明並未生效。此外,嘗試在滑鼠懸停偵聽器中使用 classList.add("...
    程式設計 發佈於2024-11-08
  • 你能衡量 MySQL 索引的有效性嗎?
    你能衡量 MySQL 索引的有效性嗎?
    了解 MySQL 索引效能優化 MySQL 查詢對於高效的資料庫處理至關重要。索引是提高搜尋效能的關鍵技術,但監控其有效性也同樣重要。本文解決了是否可以評估 MySQL 索引效能的問題並提供了解決方案。 識別查詢效能決定查詢是否使用索引,執行下列查詢:EXPLAIN EXTENDED SELECT ...
    程式設計 發佈於2024-11-08
  • 如何自訂 PDF.js
    如何自訂 PDF.js
    PDF.js 是一個很棒的開源項目,它經常更新並且不斷添加新功能,但是從外觀上看它很醜陋,或者可以說它看起來已經過時了。從 PDF.js 取得最新的 PDF 功能和修復,但在演示方面擁有流暢的外觀怎麼樣? PdfJsKit 的pdf 檢視器並不引人注目,它不會直接更改PDF.js 的程式碼,它只是...
    程式設計 發佈於2024-11-08
  • 即將推出大事
    即將推出大事
    我決定從頭開始建立全端 Web 開發人員課程,從 HID 一直到伺服器和可擴展性。所有需要知道的,都將免費涵蓋免費! 以下是涵蓋的內容: 網際網路 互聯網是如何運作的? 什麼是HTTP? 瀏覽器及其運作方式? DNS 及其運作方式? 什麼是網域名稱? 什麼是託管? ...
    程式設計 發佈於2024-11-08
  • HTML 頁面的剖析
    HTML 頁面的剖析
    程式設計 發佈於2024-11-08
  • 設計有效資料庫的終極指南(說真的,我們是認真的)
    設計有效資料庫的終極指南(說真的,我們是認真的)
    Alright, you’ve got a shiny new project. Maybe it's a cutting-edge mobile app or a massive e-commerce platform. Whatever it is, behind all that glitz ...
    程式設計 發佈於2024-11-08
  • 使用 html css 和 javascript 的圖像輪播旋轉幻覺
    使用 html css 和 javascript 的圖像輪播旋轉幻覺
    程式碼 旋轉影像輪播 身體 { 顯示:柔性; 調整內容:居中; 對齊項目:居中; 高度:100vh; 保證金:0; 背景顏色:#0d0d0d; 溢出:隱藏; ...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3