Vad är config plugins och när används de
Förstå hur Expos prebuild-pipeline omvandlar app.json till nativa iOS- och Android-projekt och identifiera när ett config plugin behövs för att lägga till ett nativt tredjepartsbibliotek.
Vad är config plugins och när används de är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Expo-hanterat arbetsflöde och native-filer
I det Expo-hanterade arbetsflödet redigerar Ni aldrig mapparna ios/ eller android/ manuellt. I stället genererar Expos pipeline för prebuild dessa native-projekt från app.json och Era JavaScript-beroenden. Det är kraftfullt för att hålla native-filer synkroniserade, men skapar en utmaning: hur anpassar Ni native-inställningar för tredjepartsbibliotek som kräver specifika ändringar i native-koden?
Vad är ett config-plugin
Ett config-plugin är en JavaScript-funktion som tar emot det aktuella konfigurationsobjektet för Expo-appen och returnerar en ändrad version av det. Expos prebuild-steg tillämpar alla config-plugins i tur och ordning innan de inbyggda projekten för iOS och Android genereras. Med config-plugins kan Ni lägga till behörigheter, ändra bygginställningar, lägga till inbyggda filer och konfigurera manifest – allt från JavaScript, utan att behöva ändra den inbyggda koden direkt.
// 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;
});
};När behöver Ni ett config-plugin
Ni behöver ett config-plugin när ett inbyggt bibliotek kräver ändringar som inte går att uttrycka enbart i app.json. Vanliga exempel är att lägga till en behörighetssträng i Info.plist eller AndroidManifest, lägga till en deklaration av en tjänst eller mottagare, ändra beroenden i build.gradle, kopiera inbyggda resursfiler till iOS- eller Android-projektet eller ange anpassade URL-scheman för OAuth. Om ett biblioteks README säger ”Add this to Info.plist” behöver Ni ett 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'
]
}
}Prebuild-pipelinen steg för steg
När Ni kör npx expo prebuild utför Expo följande steg: (1) läser app.json, (2) löser alla plugins som anges i arrayen plugins, (3) tillämpar varje plugins transform-funktion på konfigurationen i tur och ordning och (4) skriver de slutliga katalogerna ios/ och android/ utifrån den transformerade konfigurationen. De genererade inbyggda filerna ersätter de tidigare, vilket innebär att manuella ändringar i inbyggda filer skrivs över vid varje prebuild.
# 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 --cleanPaketet @expo/config-plugins
Expo tillhandahåller paketet @expo/config-plugins med en uppsättning hjälpfunktioner som kallas mods (modifierare). Varje mod riktar sig mot en specifik inbyggd fil: withInfoPlist för iOS Info.plist, withAndroidManifest för AndroidManifest.xml, withGradleProperties för Android-egenskaper, withXcodeProject för Xcode-projektfilen och flera andra. Ni kombinerar mods för att bygga upp komplexa inbyggda konfigurationer.
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;
};Kombinera plugins med withPlugins
Om Ert plugin behöver tillämpa flera mods använder Ni withPlugins för att kombinera dem på ett tydligt sätt. Skicka in en array med tupler av typen [pluginFunction, options], så tillämpas de i tur och ordning. Det gör komplexa plugins lättare att läsa och undviker djupt nästlade funktionsanrop. Stora config-plugins, till exempel ett för ett komplett betalnings-SDK, använder ofta withPlugins internt för att organisera ändringar i flera inbyggda filer.
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,
]);
};Plugins som följer med bibliotek
Många populära React Native-bibliotek levereras med ett eget config-plugin som filen app.plugin.js i paketets rotkatalog. När Ni lägger till ett sådant bibliotek i arrayen plugins i app.json hittar Expo automatiskt filen och kör den under prebuild. Bibliotek som expo-camera, expo-notifications, react-native-maps och @stripe/stripe-react-native använder alla detta tillvägagångssätt.
// 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']Anpassat plugin eller bare workflow
Innan Ni skriver ett anpassat config-plugin bör Ni fråga Er: skulle Ni kunna byta till ett bare workflow i stället? I ett bare workflow lämnar Ni Expos managed workflow och redigerar inbyggda filer direkt. Config-plugins passar bättre när Ni vill behålla managed workflow (enklare OTA-uppdateringar, inget krav på en inbyggd IDE och molnbaserade byggen). Om Ni ofta behöver djupgående anpassningar av den inbyggda delen kan ett bare workflow, eller Expos hybrida strategi med bare workflow och config-plugins, vara mer praktiskt.
Inspektera resultatet från prebuild
Efter att Ni har kört expo prebuild öppnar Ni de genererade mapparna ios/ och android/ för att kontrollera att Ert plugin fungerade. Kontrollera ios/MyApp/Info.plist för iOS-ändringar och android/app/src/main/AndroidManifest.xml för Android-ändringar. Ni kan också köra expo prebuild --no-install för att hoppa över pod install och snabbt inspektera resultatet. Lägg till assertioner i Ert plugin som kastar ett fel om en obligatorisk nyckel saknas, så upptäcker Ni felkonfigurationer tidigt.
# 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>Felhantering i config-plugins
Config-plugins körs vid byggtid, så fel visas under expo prebuild i stället för under körning. Om ett plugin kastar ett fel avbryts prebuild och en beskrivande stack trace visar vilket plugin och vilket steg som misslyckades. Validera alltid indata till Ert plugin, till exempel genom att kontrollera att en obligatorisk API-nyckel har angetts, och kasta ett fel med ett tydligt meddelande så att utvecklare exakt förstår vad som behöver åtgärdas i deras app.json.
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 jämfört med fält i app.json
Många vanliga inbyggda inställningar stöds redan direkt i app.json utan att något plugin behövs – till exempel icon, splash, permissions (för Expo bare), backgroundColor och orientation. Använd ett config-plugin först när Ni behöver ändra något som saknar ett inbyggt fält i app.json. Kontrollera Expos referens för app.json innan Ni skriver ett anpassat plugin, så att Ni inte återskapar funktionalitet som redan finns.
// 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
}
}
}
}Snabbtest
Testa Er förståelse av begreppen inom React Native Mobile Development från den här lektionen.
Sammanfattning av lektionen
I den här lektionen har Ni lärt Er: varför config-plugins finns som ett alternativ till att redigera inbyggda filer i managed workflow, hur Expos prebuild-pipeline tillämpar plugins för att generera inbyggda projekt och hur bibliotek levereras med egna app.plugin.js-filer för automatisk konfiguration av den inbyggda delen. Ni har också sett hur hjälpfunktioner från @expo/config-plugins, som withInfoPlist och withAndroidManifest, används. Nästa steg är att skriva Ert första config-plugin från grunden.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Vad är config plugins och när används de” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Vad är config plugins och när används de”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Vad är config plugins och när används de”?
Förstå hur Expos prebuild-pipeline omvandlar app.json till nativa iOS- och Android-projekt och identifiera när ett config plugin behövs för att lägga till ett nativt tredjepartsbibliotek. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Vad är config plugins och när används de”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Vad är config plugins och när används de
- Skriva ert första config plugin
- Ändra AndroidManifest och Info.plist
- Distribuera config plugins som npm-paket