Was sind Config Plugins und wann werden sie verwendet?
Verstehen Sie, wie die Expo-Prebuild-Pipeline app.json in native iOS- und Android-Projekte umwandelt, und erkennen Sie, wann ein Config Plugin zum Hinzufügen einer nativen Drittanbieterbibliothek erforderlich ist.
Was sind Config Plugins und wann werden sie verwendet? ist eine kostenlose React Native Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Native Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.
Expo Managed Workflow und native Dateien
Im Expo Managed Workflow bearbeiten Sie die Ordner ios/ oder android/ niemals manuell. Stattdessen erzeugt die prebuild-Pipeline von Expo diese nativen Projekte aus app.json und Ihren JavaScript-Abhängigkeiten. Das ist hilfreich, um native Dateien synchron zu halten, führt aber zu einer Herausforderung: Wie passen Sie native Einstellungen für Bibliotheken von Drittanbietern an, die bestimmte Änderungen am nativen Code erfordern?
Was ist ein Config Plugin
Ein Config Plugin ist eine JavaScript-Funktion, die das aktuelle Expo-App-Konfigurationsobjekt erhält und eine geänderte Version davon zurückgibt. Der prebuild-Schritt von Expo wendet alle Config Plugins nacheinander an, bevor die nativen iOS- und Android-Projekte erzeugt werden. Mit Config Plugins können Sie Berechtigungen hinzufügen, Build-Einstellungen ändern, native Dateien hinzufügen und Manifeste konfigurieren – alles aus JavaScript heraus, ohne den nativen Code direkt anzufassen.
// Minimal config plugin shape
const { withInfoPlist } = require('@expo/config-plugins');
module.exports = function withMyPlugin(config) {
// Receive config, return modified config
return withInfoPlist(config, (iosConfig) => {
iosConfig.modResults['NSCameraUsageDescription'] =
'We need camera access to scan QR codes.';
return iosConfig;
});
};Wann benötigen Sie ein Config Plugin
Sie benötigen ein Config Plugin, wenn eine native Bibliothek Änderungen erfordert, die sich allein mit app.json nicht ausdrücken lassen. Häufige Beispiele sind: einen Berechtigungstext zu Info.plist oder AndroidManifest hinzufügen, eine Service- oder Receiver-Deklaration hinzufügen, build.gradle-Abhängigkeiten ändern, native Asset-Dateien in das iOS- oder Android-Projekt kopieren oder benutzerdefinierte URL-Schemes für OAuth festlegen. Wenn in der README einer Bibliothek steht: „Fügen Sie dies zu Info.plist hinzu“, benötigen Sie ein Plugin.
// app.json — referencing plugins
{
'expo': {
'name': 'MyApp',
'plugins': [
'expo-camera',
'expo-location',
['./plugins/withStripePlugin', { 'merchantId': 'merchant.com.myapp' }],
'@react-native-google-signin/google-signin'
]
}
}Die Prebuild-Pipeline Schritt für Schritt
Wenn Sie npx expo prebuild ausführen, führt Expo die folgenden Schritte aus: (1) app.json lesen, (2) alle im Array plugins aufgeführten Plugins auflösen, (3) die Transformationsfunktion jedes Plugins der Reihe nach auf die Konfiguration anwenden, (4) die endgültigen Verzeichnisse ios/ und android/ auf Grundlage der transformierten Konfiguration schreiben. Die generierten nativen Dateien ersetzen die vorherigen Dateien – das bedeutet, dass manuelle Änderungen an nativen Dateien bei jedem Prebuild überschrieben werden.
# Run prebuild (regenerates ios/ and android/)
npx expo prebuild
# Prebuild for a specific platform
npx expo prebuild --platform ios
npx expo prebuild --platform android
# Clean existing native dirs first (fresh generation)
npx expo prebuild --cleanDas Paket @expo/config-plugins
Expo stellt das Paket @expo/config-plugins mit einer Reihe von Hilfsfunktionen bereit, die mods (Modifier) genannt werden. Jeder Mod zielt auf eine bestimmte native Datei: withInfoPlist für die iOS-Info.plist, withAndroidManifest für AndroidManifest.xml, withGradleProperties für Android-Eigenschaften, withXcodeProject für die Xcode-Projektdatei und weitere. Sie kombinieren Mods, um komplexe native Konfigurationen aufzubauen.
const {
withInfoPlist,
withAndroidManifest,
withGradleProperties,
withEntitlementsPlist,
} = require('@expo/config-plugins');
// Each mod receives (config, modifier function)
// The modifier receives the parsed native file, modifies it, returns it
module.exports = function withAllPlatforms(config) {
config = withInfoPlist(config, (c) => { /* iOS */ return c; });
config = withAndroidManifest(config, (c) => { /* Android */ return c; });
return config;
};Plugin-Komposition mit withPlugins
Wenn Ihr Plugin mehrere Mods anwenden muss, verwenden Sie withPlugins, um sie übersichtlich zu kombinieren. Übergeben Sie ein Array aus Tupeln der Form [pluginFunction, options]; die Mods werden dann nacheinander angewendet. Dadurch bleiben komplexe Plugins lesbar und tief verschachtelte Funktionsaufrufe werden vermieden. Große Config Plugins (etwa für ein vollständiges Payment-SDK) verwenden intern häufig withPlugins, um ihre zahlreichen Änderungen an nativen Dateien zu organisieren.
const { withPlugins } = require('@expo/config-plugins');
const { withCameraPermission } = require('./withCameraPermission');
const { withGoogleServicesFile } = require('./withGoogleServicesFile');
const { withFirebaseAndroid } = require('./withFirebaseAndroid');
module.exports = function withFirebasePlugin(config, options) {
return withPlugins(config, [
[withCameraPermission, { text: options.cameraPermissionText }],
withGoogleServicesFile,
withFirebaseAndroid,
]);
};Mit Bibliotheken gebündelte Plugins
Viele beliebte React-Native-Bibliotheken liefern ihr eigenes Config Plugin mit, und zwar als Datei app.plugin.js im Stammverzeichnis ihres Pakets. Wenn Sie eine solche Bibliothek im Array plugins von app.json hinzufügen, erkennt Expo diese Datei automatisch und führt sie während des Prebuilds aus. Bibliotheken wie expo-camera, expo-notifications, react-native-maps und @stripe/stripe-react-native verwenden diesen Ansatz.
// node_modules/expo-camera/app.plugin.js (simplified)
const { withPermissions } = require('@expo/config-plugins');
module.exports = function withCamera(config) {
return withPermissions(config, [
'android.permission.CAMERA',
'android.permission.RECORD_AUDIO',
]);
};
// app.json just needs:
// 'plugins': ['expo-camera']Benutzerdefiniertes Plugin oder Bare Workflow
Bevor Sie ein benutzerdefiniertes Config Plugin schreiben, fragen Sie sich: Könnte ich stattdessen zu einem Bare Workflow wechseln? In einem Bare Workflow lösen Sie sich aus dem Expo Managed Workflow und bearbeiten native Dateien direkt. Config Plugins sind besser geeignet, wenn Sie den Managed Workflow beibehalten möchten (einfachere OTA-Updates, keine native IDE erforderlich, Cloud-Builds). Wenn Sie häufig tiefgreifende Anpassungen am nativen Code benötigen, kann ein Bare Workflow (oder der hybride Ansatz aus Bare Workflow und Config Plugins von Expo) praktischer sein.
Prebuild-Ausgabe prüfen
Öffnen Sie nach der Ausführung von expo prebuild die generierten Ordner ios/ und android/, um zu überprüfen, ob Ihr Plugin funktioniert hat. Prüfen Sie ios/MyApp/Info.plist auf iOS-Änderungen und android/app/src/main/AndroidManifest.xml auf Android-Änderungen. Sie können auch expo prebuild --no-install ausführen, um pod install zu überspringen und die Ausgabe schnell zu prüfen. Fügen Sie in Ihrem Plugin Assertions hinzu, die einen Fehler auslösen, wenn ein erforderlicher Schlüssel fehlt, damit Fehlkonfigurationen früh erkannt werden.
# After prebuild, check AndroidManifest
grep -A2 'CAMERA' android/app/src/main/AndroidManifest.xml
# Expected: <uses-permission android:name='android.permission.CAMERA'/>
# Check Info.plist on iOS
grep -A1 'NSCamera' ios/MyApp/Info.plist
# Expected:
# <key>NSCameraUsageDescription</key>
# <string>We need camera access...</string>Fehlerbehandlung in Config Plugins
Config Plugins werden zur Build-Zeit ausgeführt, daher treten Fehler während expo prebuild und nicht zur Laufzeit auf. Wenn ein Plugin einen Fehler auslöst, schlägt der Prebuild mit einem aussagekräftigen Stacktrace fehl, der zeigt, welches Plugin und welcher Schritt fehlgeschlagen sind. Validieren Sie immer die Eingaben Ihres Plugins (prüfen Sie beispielsweise, ob eine erforderliche API-Key-Option angegeben wurde) und lösen Sie einen Fehler mit einer klaren Nachricht aus, damit Entwickler genau wissen, was sie in ihrer app.json korrigieren müssen.
module.exports = function withStripe(config, options = {}) {
if (!options.merchantId) {
throw new Error(
'withStripe: You must provide a merchantId option in app.json. ' +
'Example: ["./plugins/withStripe", { "merchantId": "merchant.com.yourapp" }]'
);
}
return withInfoPlist(config, (c) => {
c.modResults['StripePublishableKey'] = options.publishableKey;
return c;
});
};Config Plugins oder app.json-Felder
Viele gängige native Einstellungen werden bereits direkt in app.json unterstützt, ohne dass ein Plugin erforderlich ist – etwa icon, splash, permissions (für Expo Bare), backgroundColor und orientation. Verwenden Sie ein Config Plugin nur, wenn Sie etwas ändern müssen, für das app.json kein integriertes Feld bietet. Sehen Sie zuerst in der Expo-app.json-Referenz nach, bevor Sie ein benutzerdefiniertes Plugin schreiben, damit Sie vorhandene Funktionen nicht neu entwickeln.
// app.json built-in fields (no plugin needed)
{
'expo': {
'icon': './assets/icon.png',
'splash': { 'image': './assets/splash.png' },
'ios': {
'bundleIdentifier': 'com.yourapp',
'infoPlist': {
'NSPhotoLibraryUsageDescription': 'Save your photos'
// ^ built-in way to set Info.plist keys
}
}
}
}Kurzer Test
Testen Sie Ihr Verständnis der Konzepte zur React-Native-Mobile-Entwicklung aus dieser Lektion.
Zusammenfassung der Lektion
In dieser Lektion haben Sie gelernt: warum Config-Plugins als Alternative im Managed Workflow zur Bearbeitung nativer Dateien existieren, wie die Prebuild-Pipeline von Expo Plugins anwendet, um native Projekte zu generieren und wie Bibliotheken eigene app.plugin.js-Dateien bereitstellen, um die native Konfiguration automatisch vorzunehmen. Außerdem haben Sie gesehen, wie Sie Hilfsfunktionen aus @expo/config-plugins wie withInfoPlist und withAndroidManifest verwenden. Als Nächstes schreiben wir ein erstes Config-Plugin von Grund auf.
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Was sind Config Plugins und wann werden sie verwendet?“ kostenlos?
Ja — der vollständige Text von „Was sind Config Plugins und wann werden sie verwendet?“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Native Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Was sind Config Plugins und wann werden sie verwendet?“?
Verstehen Sie, wie die Expo-Prebuild-Pipeline app.json in native iOS- und Android-Projekte umwandelt, und erkennen Sie, wann ein Config Plugin zum Hinzufügen einer nativen Drittanbieterbibliothek erf… Du übst React Native Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Native Academy zu starten?
Keine Vorkenntnisse erforderlich. React Native Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Was sind Config Plugins und wann werden sie verwendet?“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Native Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Native Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Was sind Config Plugins und wann werden sie verwendet?
- Ihr erstes Config Plugin schreiben
- AndroidManifest und Info.plist ändern
- Config Plugins als npm-Pakete verteilen