Hallo!
Wenn Sie mit React Native gearbeitet haben, sind Sie wahrscheinlich auf Emulatorprobleme gestoßen. Sie führen den Befehl „React Native“ aus, aber der Emulator wird nicht erkannt. Selbst nachdem Sie alle erforderlichen Umgebungsvariablen in Ihren .zshrc-, .bash_profile- oder ähnlichen Dateien festgelegt haben, funktioniert es immer noch nicht.
Hier sind einige häufige Probleme und Lösungen:
Emulator nicht gefunden: Dies kann passieren, wenn der Android SDK-Pfad nicht richtig eingestellt ist. Überprüfen Sie noch einmal, ob die Umgebungsvariablen ANDROID_HOME und PATH auf die richtigen Verzeichnisse verweisen. Sie können diese Zeilen zu Ihrem .zshrc oder .bash_profile hinzufügen:
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
Nachdem Sie diese Änderungen vorgenommen haben, starten Sie Ihr Terminal neu oder führen Sie source ~/.zshrc (oder source ~/.bash_profile) aus.
Watchman-Fehler: Manchmal kann Watchman – der Dateiüberwachungsdienst von Facebook – Probleme mit veralteten Dateicaches verursachen. Um dies zu beheben, führen Sie Folgendes aus:
watchman watch-del-all
Dann starten Sie Ihren React Native-Server neu.
adb reverse to Connect to localhost: Wenn Ihre App im Android-Emulator keine Verbindung zu localhost herstellen kann, müssen Sie möglicherweise Folgendes ausführen:
adb reverse tcp:8081 tcp:8081
Dieser Befehl leitet den Datenverkehr vom Emulator an Ihren lokalen Computer weiter. Stellen Sie sicher, dass adb von Ihrem Terminal aus zugänglich ist.
Cache leeren und neu erstellen: Wenn weiterhin Probleme auftreten, versuchen Sie, den Cache zu leeren und das Projekt neu zu erstellen:
npm start -- --reset-cache cd android && ./gradlew clean cd ios && xcodebuild clean
Führen Sie dann Ihre React Native-App erneut aus.
React-native run-android oder run-ios direkt verwenden: Wenn der Emulator nicht korrekt von Ihrer IDE oder Ihrem Terminal aus startet, versuchen Sie, die App direkt auszuführen mit:
npx react-native run-android npx react-native run-ios
Das Debuggen dieser Probleme kann frustrierend sein, aber diese Schritte haben mir geholfen, viele häufige Probleme zu lösen.
Ich habe auch ein benutzerfreundliches Skript erstellt
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",
...
},
Mithilfe des obigen Skripts können Sie sowohl den Emulator als auch React Native gleichzeitig ausführen.
Danke fürs Lesen!
Das obige ist der detaillierte Inhalt vonEin Skript zur Unterstützung der Reaktion nativer Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
