Akses Kamera dengan expo-camera
Minta kebenaran kamera, papar komponen Camera dengan butang pengatup, tangkap foto dan paparkan URI imej yang ditangkap dalam komponen Image.
Akses Kamera dengan expo-camera ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 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.
Mengapa Menggunakan expo-camera?
expo-camera menyediakan komponen React Native yang memaparkan pratonton kamera langsung dan membolehkan pengguna mengambil foto serta video. Ia berfungsi pada iOS dan Android serta disepadukan dengan lancar dengan aliran kerja terurus Expo. Dengan menggunakan expo-camera, anda boleh membina ciri seperti mengambil foto profil, mengimbas dokumen, membaca kod QR dan mengambil imej masa nyata tanpa menulis sebarang kod natif.
Memasang expo-camera
Pasang expo-camera dengan perintah pemasangan Expo supaya Expo memilih versi yang serasi dengan SDK. Selepas pemasangan, modul natif expo-camera dipautkan secara automatik dalam projek Expo terurus. Dalam projek aliran kerja bare, anda juga mesti menjalankan pod install untuk iOS selepas pemasangan.
npx expo install expo-cameraMeminta Kebenaran Kamera
Sebelum memaparkan kamera, anda mesti meminta kebenaran pengguna. Gunakan Camera.requestCameraPermissionsAsync() dan semak medan status yang dikembalikan. Jika status bukan 'granted', kamera tidak boleh dipaparkan. Sentiasa minta kebenaran sebagai tindak balas kepada tindakan pengguna (seperti mengetik butang) supaya dialog kebenaran OS muncul pada masa yang sesuai.
import { Camera } from 'expo-camera';
const [permission, requestPermission] = Camera.useCameraPermissions();
if (!permission) {
return <ActivityIndicator />;
}
if (!permission.granted) {
return (
<View>
<Text>Camera access is required to take photos.</Text>
<Button title='Grant Permission' onPress={requestPermission} />
</View>
);
}Memaparkan Komponen Kamera
Selepas kebenaran diberikan, paparkan komponen CameraView daripada expo-camera. Berikan komponen itu style dengan dimensi yang ditetapkan — komponen itu tidak akan dipaparkan jika tiada saiz. Pratonton kamera memenuhi ruang yang diperuntukkan. Gunakan facing untuk menetapkan kanta awal: 'back' untuk kamera belakang atau 'front' untuk kamera swafoto.
import { CameraView } from 'expo-camera';
import { StyleSheet } from 'react-native';
export default function CameraScreen() {
const [permission, requestPermission] = Camera.useCameraPermissions();
const cameraRef = React.useRef(null);
if (!permission?.granted) return <PermissionPrompt onPress={requestPermission} />;
return (
<View style={styles.container}>
<CameraView style={styles.camera} facing='back' ref={cameraRef} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1 },
camera: { flex: 1 },
});Mengambil Foto
Pasangkan ref pada komponen CameraView dan panggil ref.current.takePictureAsync() untuk mengambil foto. Fungsi ini mengembalikan objek CameraCapturedPicture dengan sifat uri yang menunjuk kepada imej yang diambil dalam sistem fail sementara peranti. Paparkan imej yang diambil menggunakan komponen Image React Native.
const [photo, setPhoto] = React.useState(null);
async function takePicture() {
if (cameraRef.current) {
const captured = await cameraRef.current.takePictureAsync({
quality: 0.8, // 0 to 1, lower = smaller file
base64: false, // true to include base64 string in result
});
setPhoto(captured.uri);
}
}Memaparkan Imej yang Diambil
Selepas URI foto diperoleh, tukar paparan daripada pratonton kamera kepada komponen Image yang menunjukkan foto tersebut. Sediakan butang ‘Ambil Semula’ dan ‘Gunakan Foto’ supaya pengguna boleh mengesahkan atau membuang foto itu. Corak pratonton sebelum pengesahan ini merupakan amalan biasa dalam aplikasi kamera dan mengelakkan foto yang tidak disengajakan atau kurang baik.
if (photo) {
return (
<View style={styles.container}>
<Image source={{ uri: photo }} style={styles.camera} />
<View style={styles.buttonRow}>
<Button title='Retake' onPress={() => setPhoto(null)} />
<Button title='Use Photo' onPress={() => onPhotoSelected(photo)} />
</View>
</View>
);
}Bertukar antara Kamera Hadapan dan Belakang
Benarkan pengguna bertukar antara kamera hadapan dan belakang dengan menukar nilai pemboleh ubah keadaan. Hantar keadaan itu kepada prop facing bagi CameraView. React Native mengendalikan pertukaran kamera secara automatik apabila prop berubah. Tambahkan butang pusing pada tindanan UI untuk pengalaman pengguna yang intuitif.
const [facing, setFacing] = React.useState<'back' | 'front'>('back');
function toggleCamera() {
setFacing((current) => (current === 'back' ? 'front' : 'back'));
}
<CameraView style={styles.camera} facing={facing} ref={cameraRef}>
<TouchableOpacity onPress={toggleCamera} style={styles.flipButton}>
<Ionicons name='camera-reverse' size={32} color='white' />
</TouchableOpacity>
<TouchableOpacity onPress={takePicture} style={styles.shutterButton} />
</CameraView>Mengimbas Kod QR
CameraView juga menyokong pengimbasan kod bar, termasuk kod QR. Tetapkan prop onBarcodeScanned kepada fungsi panggil balik. Panggil balik itu dicetuskan dengan objek hasil yang mengandungi type kod bar dan data (rentetan yang dinyahkod). Jeda pengimbasan selepas hasil pertama untuk mengelakkan kod yang sama diproses berkali-kali.
const [scanned, setScanned] = React.useState(false);
function handleBarcodeScan({ type, data }) {
if (!scanned) {
setScanned(true);
Alert.alert('Scanned!', 'Type: ' + type + '\nData: ' + data, [
{ text: 'Scan Again', onPress: () => setScanned(false) },
]);
}
}
<CameraView
style={styles.camera}
onBarcodeScanned={scanned ? undefined : handleBarcodeScan}
barcodeScannerSettings={{ barcodeTypes: ['qr', 'ean13'] }}
/>Melaraskan Kualiti Kamera
Prop pictureSize membolehkan anda mengawal resolusi imej yang diambil. Gunakan Camera.getAvailablePictureSizesAsync untuk mendapatkan saiz yang disokong peranti dan membolehkan pengguna membuat pilihan. Foto beresolusi lebih tinggi mempunyai kualiti yang lebih baik tetapi menghasilkan fail yang lebih besar. Untuk foto profil pengguna, resolusi sederhana (sekitar 1080p) biasanya memberikan keseimbangan yang sesuai.
const photo = await cameraRef.current.takePictureAsync({
quality: 0.7,
exif: false, // skip EXIF metadata to reduce file size
skipProcessing: true, // faster capture on Android
});
console.log('Photo size:', photo.width, 'x', photo.height);Menyimpan ke Pustaka Media
uri foto yang diambil menunjuk kepada lokasi sementara. Untuk menyimpannya secara kekal dalam galeri foto peranti, gunakan expo-media-library. Panggil MediaLibrary.saveToLibraryAsync(photo.uri) selepas foto diambil. Ingat untuk meminta kebenaran MediaLibrary secara berasingan selain kebenaran kamera.
import * as MediaLibrary from 'expo-media-library';
async function savePhoto(uri: string) {
const { status } = await MediaLibrary.requestPermissionsAsync();
if (status === 'granted') {
await MediaLibrary.saveToLibraryAsync(uri);
Alert.alert('Saved!', 'Photo saved to your gallery.');
}
}Petua UI Tindanan Kamera
Komponen CameraView boleh memaparkan komponen anak di atas pratonton kamera dan berfungsi sebagai tindanan UI. Letakkan butang pengatup, togol denyar dan panduan pemangkasan sebagai anak berkedudukan mutlak di dalam CameraView. Gunakan StyleSheet dengan position: 'absolute' serta koordinat bottom / top untuk meletakkan kawalan tindanan secara intuitif di atas pratonton langsung.
Semakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.
Ringkasan Pelajaran
Dalam pelajaran ini anda telah mempelajari bahawa: Camera.useCameraPermissions mengendalikan permintaan dan semakan kebenaran kamera sebelum paparan pemidang tilik dipaparkan, CameraView dengan ref membolehkan anda memanggil takePictureAsync untuk mengambil foto dan mendapatkan URI-nya, manakala onBarcodeScanned membolehkan pembacaan kod QR menggunakan komponen kamera yang sama. Seterusnya, kita akan meneroka cara membaca lokasi GPS dengan expo-location.
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 “Akses Kamera dengan expo-camera” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Akses Kamera dengan expo-camera”, 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 “Akses Kamera dengan expo-camera”?
Minta kebenaran kamera, papar komponen Camera dengan butang pengatup, tangkap foto dan paparkan URI imej yang ditangkap dalam komponen Image. 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 1 daripada 4.
Berapa lamakah pelajaran “Akses Kamera dengan expo-camera” 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
- Akses Kamera dengan expo-camera
- Membaca Lokasi GPS dengan expo-location
- Menjadualkan Pemberitahuan Setempat
- Mengendalikan Kebenaran dengan Baik