Ensimmäisen config pluginin kirjoittaminen
Luokaa withMyPlugin-funktio @expo/config-pluginsin apufunktioilla, lisätkää se app.json-tiedoston plugins-taulukkoon ja suorittakaa expo prebuild natiivin tuloksen tarkistamiseksi.
Ensimmäisen config pluginin kirjoittaminen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Config Pluginin projektin määrittäminen
Voit kirjoittaa config pluginin projektisi sisäisenä tiedostona tai erillisenä npm-pakettina. Projektikohtaista pluginia varten luo projektin juurihakemistoon plugins/-kansio ja lisää plugin-tiedosto sinne. Viittaa siihen tiedostossa app.json suhteellisen polun avulla. Näin plugin pysyy sovelluksen yhteydessä eikä sitä tarvitse julkaista erikseen.
# Project structure
your-expo-app/
plugins/
withCustomPermissions.js <- your plugin
app.json
App.tsx
# app.json reference
{
'expo': {
'plugins': [
['./plugins/withCustomPermissions', { 'reason': 'Scan QR codes' }]
]
}
}withMyPlugin-funktion allekirjoitus
Jokainen config plugin on synkroninen funktio, joka ottaa kaksi argumenttia: config (koko Expon konfiguraatio-olion) ja valinnaisen options-olion, joka välitetään tiedostosta app.json. Sen on palautettava (muokattu) konfiguraatio-olio. Käytä Expon valmiita modifier-apufunktioita ketjutettuina tämän funktion sisällä tehdäksesi tiettyjä muutoksia natiivitiedostoihin, ja palauta viimeisen modifier-kutsun tulos.
// plugins/withCustomPermissions.js
const { withInfoPlist } = require('@expo/config-plugins');
/**
* @param {import('@expo/config-plugins').ExpoConfig} config
* @param {{ reason: string }} options
*/
function withCustomPermissions(config, options = {}) {
const reason = options.reason || 'This app requires camera access.';
return withInfoPlist(config, (iosConfig) => {
iosConfig.modResults['NSCameraUsageDescription'] = reason;
return iosConfig;
});
}
module.exports = withCustomPermissions;modResults-olion ymmärtäminen
Mod-callback-funktion sisällä, esimerkiksi withInfoPlist-funktiolle välitetyssä funktiossa, saat konfiguraatio-olion, jonka config.modResults sisältää jäsennetyn natiivitiedoston JavaScript-oliona. withInfoPlist-funktion tapauksessa kyseessä on tavallinen olio, joka vastaa plist-sanakirjaa. withAndroidManifest-funktion tapauksessa kyseessä on jäsennetty XML-dokumentti. Muokkaa modResults-oliota suoraan ja palauta konfiguraatio — Expo sarjallistaa sen automaattisesti takaisin natiivitiedoston muotoon.
const { withInfoPlist } = require('@expo/config-plugins');
module.exports = function withAppTrackingPermission(config) {
return withInfoPlist(config, (iosConfig) => {
// modResults is the parsed Info.plist dictionary
const plist = iosConfig.modResults;
// Add multiple keys at once
plist['NSUserTrackingUsageDescription'] =
'We use tracking to improve your ad experience.';
plist['ITSAppUsesNonExemptEncryption'] = false;
return iosConfig;
});
};AndroidManifest.xml-tiedoston muokkaaminen
Muokkaa tiedostoa AndroidManifest.xml käyttämällä withAndroidManifest-funktiota. modResults on xmldom-kirjaston jäsentämä XML-olio. Expon AndroidConfig-apufunktiot tarjoavat apumenetelmiä, kuten addUsesPermission, addMetaDataItemToMainActivity ja getMainApplication, jotka toimivat tämän XML-rakenteen kanssa, joten XML DOM -rakennetta tarvitsee harvoin käsitellä suoraan.
const { withAndroidManifest, AndroidConfig } = require('@expo/config-plugins');
const { addUsesPermission } = AndroidConfig.Permissions;
module.exports = function withBluetoothPermissions(config) {
return withAndroidManifest(config, (androidConfig) => {
const manifest = androidConfig.modResults;
// Add multiple permissions
addUsesPermission(manifest, 'android.permission.BLUETOOTH');
addUsesPermission(manifest, 'android.permission.BLUETOOTH_ADMIN');
addUsesPermission(manifest, 'android.permission.BLUETOOTH_SCAN');
return androidConfig;
});
};Pluginin testaaminen expo prebuild -komennolla
Testaa pluginisi ja tarkastele luotuja natiivitiedostoja suorittamalla npx expo prebuild --clean. --clean-valitsin aloittaa puhtaalta pohjalta. Avaa prebuildin jälkeen luodut tiedostot ja varmista, että muutokset otettiin käyttöön. Plist-muutokset voit tarkistaa tiedostosta ios/YourApp/Info.plist ja manifest-muutokset tiedostosta android/app/src/main/AndroidManifest.xml. Korjaa plugin-tiedoston ongelmat ja suorita prebuild uudelleen, kunnes tulos on oikea.
# Test the plugin
npx expo prebuild --clean --platform ios
# Verify the change in Info.plist
plutil -p ios/MyApp/Info.plist | grep -A1 Camera
# Output:
# "NSCameraUsageDescription" => "Scan QR codes."
# For Android
cat android/app/src/main/AndroidManifest.xml | grep BLUETOOTHTiedostojen lisääminen natiiviprojektiin
Jotkin pluginit tarvitsevat toiminnon, joka kopioi tiedostoja natiiviprojektiin — esimerkiksi Google Services -JSON-tiedoston tai mukautetun fontin. Käytä withDangerousMod-funktiota mielivaltaisiin tiedostojärjestelmätoimintoihin prebuildin aikana. Se on tarkoitettu muutoksille, joita muut apufunktiot eivät kata. Käytä sitä harkiten ja dokumentoi sivuvaikutukset selkeästi.
const { withDangerousMod } = require('@expo/config-plugins');
const path = require('path');
const fs = require('fs');
module.exports = function withGoogleServicesJson(config) {
return withDangerousMod(config, [
'android',
async (dangerousConfig) => {
const projectRoot = dangerousConfig.modRequest.projectRoot;
const src = path.join(projectRoot, 'google-services.json');
const dest = path.join(projectRoot, 'android', 'app', 'google-services.json');
if (!fs.existsSync(src)) {
throw new Error('google-services.json not found in project root');
}
fs.copyFileSync(src, dest);
return dangerousConfig;
},
]);
};Konfiguraatioarvojen käyttäminen pluginissa
Pluginillesi välitetty config-olio sisältää koko Expon konfiguraation, mukaan lukien tiedoston app.json arvot. Voit lukea arvoja config.name, config.version, config.ios.bundleIdentifier, config.android.package sekä määrittämiäsi extra-kenttiä. Näin pluginisi voi perustua konfiguraation tietoihin kovakoodattujen arvojen sijaan.
module.exports = function withAppMetadata(config) {
const appName = config.name;
const bundleId = config.ios?.bundleIdentifier;
const version = config.version;
return withInfoPlist(config, (iosConfig) => {
iosConfig.modResults['CFBundleDisplayName'] = appName;
// Log for debugging during prebuild
console.log(
'[withAppMetadata] Setting display name to:', appName,
'for bundle:', bundleId, 'v' + version
);
return iosConfig;
});
};build.gradle-tiedoston muokkaaminen withAppBuildGradle-funktiolla
Muokkaa Android-sovellustason build.gradle-tiedostoa käyttämällä withAppBuildGradle-funktiota. modResults.contents-ominaisuus sisältää tiedoston raakana merkkijonona, ja voit lisätä muutokset merkkijonojen käsittelyn tai säännöllisten lausekkeiden avulla. Tätä lähestymistapaa tarvitaan Gradle-riippuvuuksien, plugin-määritysten tai mukautettujen koontiasetusten lisäämiseen, koska ylemmän tason apufunktiot eivät kata niitä.
const { withAppBuildGradle } = require('@expo/config-plugins');
module.exports = function withGooglePlayServicesPlugin(config) {
return withAppBuildGradle(config, (gradleConfig) => {
const contents = gradleConfig.modResults.contents;
// Add google-services plugin if not already present
if (!contents.includes('com.google.gms.google-services')) {
gradleConfig.modResults.contents = contents.replace(
'apply plugin: "com.android.application"',
'apply plugin: "com.android.application"\napply plugin: "com.google.gms.google-services"'
);
}
return gradleConfig;
});
};Xcode-projektin muokkaaminen withXcodeProject-funktiolla
Kun haluat muuttaa itse Xcode-projektitiedostoa — esimerkiksi lisätä koontivaiheen, linkittää natiivikirjaston tai lisätä ominaisuuden — käytä withXcodeProject-funktiota. modResults on xcode-npm-paketin tarjoama XcodeProject-olio. Tämä on monimutkaisin mod, ja sen käyttö edellyttää Xcode-projektin formaatin tuntemusta. Suosi ylemmän tason apufunktioita aina, kun niitä on saatavilla.
const { withXcodeProject } = require('@expo/config-plugins');
module.exports = function withRunScript(config) {
return withXcodeProject(config, (xcode) => {
const project = xcode.modResults;
const target = project.getFirstTarget().uuid;
// Add a run script build phase
project.addBuildPhase(
[],
'PBXShellScriptBuildPhase',
'Bundle React Native code and images',
target,
{ shellPath: '/bin/sh', shellScript: 'echo Running custom script' }
);
return xcode;
});
};Entitlements withEntitlementsPlist-funktiolla
iOS:n entitlements ovat .entitlements-tiedostossa määritettäviä ominaisuusilmoituksia, joiden on vastattava provisioning profilea. Lisää withEntitlementsPlist-funktiolla entitlements-määrityksiä esimerkiksi Push Notificationsia, iCloudia, HealthKitiä tai App Groupsia varten. Ilman oikeita entitlement-määrityksiä ominaisuudet eivät laitteella toimi suorituksen aikana, vaikka koodi näyttäisi olevan oikein.
const { withEntitlementsPlist } = require('@expo/config-plugins');
module.exports = function withPushNotifications(config) {
return withEntitlementsPlist(config, (iosConfig) => {
const entitlements = iosConfig.modResults;
// Enable push notifications capability
entitlements['aps-environment'] = 'production';
// App Groups for sharing data with extensions
if (!entitlements['com.apple.security.application-groups']) {
entitlements['com.apple.security.application-groups'] = [];
}
entitlements['com.apple.security.application-groups'].push(
'group.com.yourapp.shared'
);
return iosConfig;
});
};Kokonaisen pluginin koostaminen
Käytännön pluginit joutuvat usein muokkaamaan useita natiivitiedostoja molemmilla alustoilla. Koosta apufunktiot järjestyksessä ja välitä kunkin tulos seuraavalle. Lisää selkeät syötteiden tarkistukset funktion alkuun ja kirjaa etenemisviestejä, jotta kehittäjät voivat seurata, mitä plugin muutti prebuildin aikana. Palauta lopullinen konfiguraatio kaikkien muutosten jälkeen.
const {
withInfoPlist,
withAndroidManifest,
withEntitlementsPlist,
AndroidConfig,
} = require('@expo/config-plugins');
module.exports = function withPaymentSDK(config, opts = {}) {
if (!opts.merchantId) {
throw new Error('withPaymentSDK requires a merchantId option.');
}
// iOS
config = withInfoPlist(config, (c) => {
c.modResults['PaymentMerchantId'] = opts.merchantId;
return c;
});
config = withEntitlementsPlist(config, (c) => {
c.modResults['com.apple.developer.in-app-payments'] = [opts.merchantId];
return c;
});
// Android
config = withAndroidManifest(config, (c) => {
AndroidConfig.Permissions.addUsesPermission(
c.modResults, 'android.permission.INTERNET'
);
return c;
});
return config;
};Pikatesti
Testaa tämän oppitunnin React Native Mobile Development -käsitteiden ymmärtämistä.
Oppitunnin kertaus
Tässä oppitunnissa opit: miten kirjoitetaan config plugin -funktio, joka ottaa config- ja options-argumentit ja palauttaa muokatun konfiguraation, miten käytetään withInfoPlist-, withAndroidManifest-, withEntitlementsPlist- ja withDangerousMod-funktioita sekä miten plugin testataan komennolla expo prebuild --clean. Näit myös, miten useita modeja yhdistetään täydelliseksi eri alustojen kanssa toimivaksi pluginiksi. Seuraavaksi tutustumme AndroidManifest- ja Info.plist-tiedostojen yksityiskohtaiseen muokkaamiseen.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Ensimmäisen config pluginin kirjoittaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Ensimmäisen config pluginin kirjoittaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Ensimmäisen config pluginin kirjoittaminen”?
Luokaa withMyPlugin-funktio @expo/config-pluginsin apufunktioilla, lisätkää se app.json-tiedoston plugins-taulukkoon ja suorittakaa expo prebuild natiivin tuloksen tarkistamiseksi. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Ensimmäisen config pluginin kirjoittaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Mitä config pluginit ovat ja milloin niitä käytetään
- Ensimmäisen config pluginin kirjoittaminen
- AndroidManifest- ja Info.plist-tiedostojen muokkaaminen
- Config pluginien jakaminen npm-paketteina