ホームページ > ウェブフロントエンド > jsチュートリアル > ネイティブ開発者の反応を支援するスクリプト

ネイティブ開発者の反応を支援するスクリプト

WBOY
リリース: 2024-09-07 06:36:32
オリジナル
672 人が閲覧しました

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 reverse to Connect to 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
    
    ログイン後にコピー

これらの問題のデバッグはイライラするかもしれませんが、これらの手順は多くの一般的な問題を解決するのに役立ちました。

使いやすいスクリプトも作成しました

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

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 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート