Menulis Pemalam Konfigurasi Pertama Anda
Cipta fungsi withMyPlugin menggunakan pembantu @expo/config-plugins, tambahkannya kepada tatasusunan plugins app.json, dan jalankan expo prebuild untuk mengesahkan output natif.
Menulis Pemalam Konfigurasi Pertama Anda ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Persediaan Projek untuk Pemalam Konfigurasi
Anda boleh menulis pemalam konfigurasi sebagai fail dalam projek anda atau sebagai pakej npm berasingan. Untuk pemalam khusus projek, cipta folder plugins/ pada akar projek dan tambahkan fail pemalam di situ. Rujuk fail tersebut dalam app.json menggunakan laluan relatif. Pendekatan ini memastikan pemalam berada bersama aplikasi dan tidak memerlukan langkah penerbitan.
# 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' }]
]
}
}Tandatangan Fungsi withMyPlugin
Setiap pemalam konfigurasi ialah fungsi segerak yang mengambil dua argumen: config (objek konfigurasi Expo lengkap) dan objek options pilihan yang dihantar daripada app.json. Fungsi ini mesti mengembalikan objek konfigurasi (yang telah diubah suai). Anda merangkaikan pembantu pengubah terbina dalam Expo di dalam fungsi ini untuk membuat perubahan tertentu pada fail asli, kemudian mengembalikan hasil panggilan pengubah terakhir.
// 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;Memahami modResults
Di dalam panggilan balik mod, seperti yang dihantar kepada withInfoPlist, anda menerima objek konfigurasi yang config.modResults-nya mengandungi fail asli yang dihuraikan sebagai objek JavaScript. Untuk withInfoPlist, ia ialah objek biasa yang mencerminkan kamus plist. Untuk withAndroidManifest, ia ialah dokumen XML yang dihuraikan. Anda mengubah modResults di tempatnya dan mengembalikan konfigurasi — Expo akan mensiriakannya semula kepada format fail asli secara automatik.
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;
});
};Mengubah suai AndroidManifest.xml
Gunakan withAndroidManifest untuk mengubah suai AndroidManifest.xml. modResults ialah objek XML yang dihuraikan oleh pustaka xmldom. Pembantu AndroidConfig Expo menyediakan fungsi utiliti seperti addUsesPermission, addMetaDataItemToMainActivity dan getMainApplication yang beroperasi pada struktur XML ini, jadi anda jarang perlu memanipulasi DOM XML secara langsung.
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;
});
};Menguji Pemalam Anda dengan expo prebuild
Jalankan npx expo prebuild --clean untuk menguji pemalam anda dan memeriksa fail asli yang dijana. Gunakan --clean untuk bermula dari awal. Selepas prabina, buka fail yang dijana untuk mengesahkan perubahan anda telah digunakan. Untuk perubahan plist, periksa ios/YourApp/Info.plist. Untuk perubahan manifes, periksa android/app/src/main/AndroidManifest.xml. Betulkan sebarang isu dalam fail pemalam dan jalankan semula prabina sehingga outputnya betul.
# 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 BLUETOOTHMenambah Fail ke Projek Asli
Sesetengah pemalam perlu menyalin fail ke dalam projek asli — contohnya fail JSON Google Services atau fon tersuai. Gunakan withDangerousMod untuk operasi sistem fail sewenang-wenangnya semasa prabina. Ini ialah pilihan terakhir untuk perubahan yang tidak diliputi oleh pembantu lain. Gunakannya secara berhemat dan dokumentasikan kesan sampingannya dengan jelas.
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;
},
]);
};Mengakses Nilai Konfigurasi dalam Pemalam
Objek config yang dihantar kepada pemalam anda mengandungi konfigurasi Expo lengkap, termasuk nilai daripada app.json. Anda boleh membaca config.name, config.version, config.ios.bundleIdentifier, config.android.package dan sebarang medan extra yang anda takrifkan. Ini membolehkan pemalam anda dipacu data berdasarkan konfigurasi aplikasi, bukannya nilai yang dikodkan secara keras.
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;
});
};Mengubah suai build.gradle dengan withAppBuildGradle
Untuk mengubah suai fail build.gradle peringkat aplikasi Android, gunakan withAppBuildGradle. Sifat modResults.contents mengandungi fail tersebut sebagai rentetan mentah, dan anda menggunakan manipulasi rentetan atau ungkapan nalar untuk menyisipkan perubahan anda. Pendekatan ini diperlukan untuk menambah kebergantungan Gradle, pengisytiharan pemalam atau konfigurasi binaan tersuai yang tidak diliputi oleh pembantu peringkat lebih tinggi.
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;
});
};Mengubah suai Projek Xcode dengan withXcodeProject
Untuk perubahan pada fail projek Xcode itu sendiri — seperti menambah fasa binaan, memautkan pustaka asli atau menambah keupayaan — gunakan withXcodeProject. modResults ialah objek XcodeProject daripada pakej npm xcode. Ini ialah mod yang paling kompleks dan memerlukan kefahaman tentang format projek Xcode. Utamakan pembantu peringkat lebih tinggi apabila tersedia.
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;
});
};Entitlement dengan withEntitlementsPlist
Entitlement iOS ialah pengisytiharan keupayaan dalam fail .entitlements yang mesti sepadan dengan profil peruntukan anda. Gunakan withEntitlementsPlist untuk menambah entitlement seperti Pemberitahuan Tolak, iCloud, HealthKit atau Kumpulan Aplikasi. Tanpa entitlement yang betul, ciri akan gagal secara senyap semasa masa jalan pada peranti walaupun kod kelihatan betul.
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;
});
};Menggabungkan Pemalam Lengkap
Pemalam dunia sebenar sering perlu mengubah suai berbilang fail asli merentas kedua-dua platform. Gabungkan pembantu mengikut turutan dengan menghantar hasil setiap pembantu kepada pembantu seterusnya. Tambahkan pengesahan input yang jelas pada bahagian awal dan catat mesej kemajuan supaya pembangun dapat menjejaki perubahan yang dibuat oleh pemalam semasa prabina. Kembalikan konfigurasi akhir selepas semua pengubahsuaian selesai.
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;
};Semakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Aplikasi Mudah Alih React Native daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda telah mempelajari: cara menulis fungsi pemalam konfigurasi yang mengambil config dan options lalu mengembalikan config yang telah diubah suai, cara menggunakan withInfoPlist, withAndroidManifest, withEntitlementsPlist dan withDangerousMod serta cara menguji pemalam anda dengan expo prebuild --clean. Anda juga telah melihat cara menggabungkan berbilang mod menjadi pemalam rentas platform yang lengkap. Seterusnya, kita akan meneroka pengubahsuaian AndroidManifest dan Info.plist dengan lebih terperinci.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Menulis Pemalam Konfigurasi Pertama Anda” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Menulis Pemalam Konfigurasi Pertama Anda”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menulis Pemalam Konfigurasi Pertama Anda”?
Cipta fungsi withMyPlugin menggunakan pembantu @expo/config-plugins, tambahkannya kepada tatasusunan plugins app.json, dan jalankan expo prebuild untuk mengesahkan output natif. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Menulis Pemalam Konfigurasi Pertama Anda” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Apakah Pemalam Konfigurasi dan Bilakah Perlu Menggunakannya
- Menulis Pemalam Konfigurasi Pertama Anda
- Mengubah Suai AndroidManifest dan Info.plist
- Mengedar Pemalam Konfigurasi sebagai Pakej npm