Dostęp do aparatu za pomocą expo-camera
Poproś o uprawnienia do aparatu, wyrenderuj komponent Camera z przyciskiem migawki, zrób zdjęcie i wyświetl URI przechwyconego obrazu w komponencie Image.
Dostęp do aparatu za pomocą expo-camera to bezpłatna lekcja React Native Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Native Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Native Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Why Use expo-camera?
expo-camera provides a React Native component that renders a live camera preview and lets users capture photos and videos. It works in both iOS and Android and integrates cleanly with Expo's managed workflow. Using expo-camera you can build features like profile photo capture, document scanning, QR code reading, and real-time image capture without writing any native code.
Installing expo-camera
Install expo-camera with the Expo install command so Expo picks the SDK-compatible version. After installation, expo-camera's native modules are linked automatically in an Expo managed project. In a bare workflow project you must also run pod install for iOS after installing.
npx expo install expo-cameraRequesting Camera Permission
Before showing the camera, you must request the user's permission. Use Camera.requestCameraPermissionsAsync() and check the returned status field. If the status is not 'granted', the camera cannot be shown. Always request permission in response to a user action (like tapping a button) so the OS permission dialog appears at a natural moment.
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>
);
}Rendering the Camera Component
Once permission is granted, render the CameraView component from expo-camera. Give it a style with defined dimensions — it will not render if it has no size. The camera preview fills the allocated space. Use facing to set the initial lens: 'back' for the rear camera or 'front' for the selfie camera.
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 },
});Capturing a Photo
Attach a ref to the CameraView component and call ref.current.takePictureAsync() to capture a photo. This returns a CameraCapturedPicture object with a uri property pointing to the captured image on the device's temporary file system. Display the captured image using React Native's Image component.
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);
}
}Displaying the Captured Image
Once a photo URI is captured, switch the view from the camera preview to an Image component showing the captured photo. Provide 'Retake' and 'Use Photo' buttons so the user can confirm or discard the capture. This preview-before-confirm pattern is standard in camera apps and prevents accidental bad photos.
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>
);
}Toggling Between Front and Back Camera
Allow users to switch between the front and back camera by toggling a state variable. Pass the state to the facing prop of CameraView. React Native handles the camera switch automatically when the prop changes. Add a flip button in the UI overlay for intuitive UX.
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>Scanning QR Codes
CameraView also supports barcode scanning, including QR codes. Set the onBarcodeScanned prop to a callback function. The callback fires with a result object containing the barcode type and data (the decoded string). Pause scanning after the first result to avoid handling the same code multiple times.
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'] }}
/>Adjusting Camera Quality
The pictureSize prop lets you control the resolution of captured images. Use Camera.getAvailablePictureSizesAsync to query the device's supported sizes and let users choose. Higher resolution photos are better quality but produce larger files. For user-facing profile photos, a medium resolution (around 1080p) is usually the right balance.
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);Saving to the Media Library
A captured photo's uri points to a temporary location. To save it permanently to the device's photo gallery, use expo-media-library. Call MediaLibrary.saveToLibraryAsync(photo.uri) after capture. Remember to request MediaLibrary permission separately in addition to the camera permission.
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.');
}
}Camera Overlay UI Tips
The CameraView component can render child components on top of the camera preview, acting as a UI overlay. Place shutter buttons, flash toggles, and crop guides as absolute-positioned children inside CameraView. Use a StyleSheet with position: 'absolute' and bottom / top coordinates to position overlay controls intuitively over the live preview.
Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
In this lesson you learned: Camera.useCameraPermissions handles requesting and checking camera permission before rendering the viewfinder, CameraView with a ref lets you call takePictureAsync to capture a photo and get its URI, and onBarcodeScanned enables QR code reading with the same camera component. Next up we explore reading GPS location with expo-location.
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Dostęp do aparatu za pomocą expo-camera” jest bezpłatna?
Tak — pełny tekst „Dostęp do aparatu za pomocą expo-camera” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Native Academy, przejdź na CoddyKit PRO. Kurs React Native Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Dostęp do aparatu za pomocą expo-camera”?
Poproś o uprawnienia do aparatu, wyrenderuj komponent Camera z przyciskiem migawki, zrób zdjęcie i wyświetl URI przechwyconego obrazu w komponencie Image. Ćwiczysz React Native Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Native Academy?
Nie wymagamy żadnego doświadczenia. React Native Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Dostęp do aparatu za pomocą expo-camera”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Native Academy?
Tak. Każda lekcja React Native Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dostęp do aparatu za pomocą expo-camera
- Odczytywanie lokalizacji GPS za pomocą expo-location
- Planowanie lokalnych powiadomień
- Prawidłowa obsługa uprawnień