Kameraadgang med expo-camera
Anmod om kameratilladelse, render en Camera-komponent med en udløserknap, tag et foto, og vis URI'en for det optagne billede i en Image-komponent.
Kameraadgang med expo-camera er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvorfor bruge expo-camera?
expo-camera leverer en React Native-komponent, der gengiver en liveforhåndsvisning fra kameraet og lader brugere tage billeder og optage videoer. Den fungerer på både iOS og Android og integreres problemfrit med Expos administrerede arbejdsgang. Med expo-camera kan du bygge funktioner som optagelse af profilbilleder, dokumentscanning, QR-kodelæsning og billedoptagelse i realtid uden at skrive native-kode.
Installation af expo-camera
Installér expo-camera med Expos installationskommando, så Expo vælger den version, der passer til SDK'et. Efter installationen linkes expo-cameras native moduler automatisk i et Expo-projekt med administreret arbejdsgang. I et projekt med bare arbejdsgang skal du også køre pod install til iOS efter installationen.
npx expo install expo-cameraAnmodning om kameratilladelse
Før du viser kameraet, skal du anmode om brugerens tilladelse. Brug Camera.requestCameraPermissionsAsync(), og kontrollér feltet status i det returnerede resultat. Hvis status ikke er 'granted', kan kameraet ikke vises. Anmod altid om tilladelse som reaktion på en brugerhandling, f.eks. et tryk på en knap, så operativsystemets tilladelsesdialog vises på et naturligt tidspunkt.
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 af kamerakomponenten
Når tilladelsen er givet, skal du rendere komponenten CameraView fra expo-camera. Giv den en style med definerede dimensioner — den bliver ikke rendereet, hvis den ikke har nogen størrelse. Kameraeksemplet udfylder den tildelte plads. Brug facing til at angive det objektiv, der skal bruges som udgangspunkt: 'back' til kameraet på bagsiden eller 'front' til selfie-kameraet.
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 },
});Tage et foto
Tilknyt en ref til komponenten CameraView, og kald ref.current.takePictureAsync() for at tage et foto. Dette returnerer et CameraCapturedPicture-objekt med en uri-egenskab, der peger på det tagne billede i enhedens midlertidige filsystem. Vis det tagne billede ved hjælp af React Natives Image-komponent.
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);
}
}Vise det tagne billede
Når en foto-URI er blevet hentet, skal du skifte visningen fra kameraeksemplet til en Image-komponent, der viser det tagne foto. Tilføj knapperne »Tag igen« og »Brug foto«, så brugeren kan bekræfte eller kassere optagelsen. Mønstret med forhåndsvisning før bekræftelse er standard i kameraapps og forhindrer utilsigtede dårlige fotos.
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>
);
}Skifte mellem front- og bagkamera
Giv brugerne mulighed for at skifte mellem front- og bagkameraet ved at skifte værdien af en state-variabel. Giv staten videre til facing-propen på CameraView. React Native håndterer kameraskiftet automatisk, når propen ændres. Tilføj en vendeknap i brugerfladens overlay, så funktionen er intuitiv.
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>Scanne QR-koder
CameraView understøtter også stregkodescanning, herunder QR-koder. Sæt propen onBarcodeScanned til en callback-funktion. Callback-funktionen kaldes med et resultatobjekt, der indeholder stregkodens type og data (den afkodede streng). Sæt scanningen på pause efter det første resultat for at undgå at håndtere den samme kode flere gange.
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'] }}
/>Justere kamerakvaliteten
Med propen pictureSize kan du styre opløsningen på de tagne billeder. Brug Camera.getAvailablePictureSizesAsync til at forespørge om enhedens understøttede størrelser, og lad brugerne vælge. Fotos med højere opløsning har bedre kvalitet, men giver større filer. Til profilfotos, der vises til brugerne, er en mellemopløsning (omkring 1080p) normalt den bedste 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);Gemme i mediebiblioteket
Et tagnets fotos uri peger på en midlertidig placering. Brug expo-media-library til at gemme det permanent i enhedens fotogalleri. Kald MediaLibrary.saveToLibraryAsync(photo.uri) efter optagelsen. Husk at anmode om tilladelse til MediaLibrary separat ud over kameratilladelsen.
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.');
}
}Tip til kameraets overlay-brugerflade
Komponenten CameraView kan rendere underordnede komponenter oven på kameraeksemplet og dermed fungere som et brugerflade-overlay. Placér udløserknapper, blitzknapper og beskæringsvejledninger som absolut positionerede underordnede komponenter inde i CameraView. Brug en StyleSheet med position: 'absolute' samt koordinaterne bottom og top til intuitivt at placere overlay-kontroller over liveeksemplet.
Hurtigt tjek
Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.
Opsummering af lektionen
I denne lektion har du lært, at Camera.useCameraPermissions håndterer anmodning om og kontrol af kameratilladelse, før søgeren renderees, at CameraView with a ref giver dig mulighed for at kalde takePictureAsync for at tage et foto og hente dets URI, og at onBarcodeScanned aktiverer QR-kodelæsning med den samme kamerakomponent. Dernæst ser vi på, hvordan du læser GPS-positioner med expo-location.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Kameraadgang med expo-camera” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Kameraadgang med expo-camera”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Kameraadgang med expo-camera”?
Anmod om kameratilladelse, render en Camera-komponent med en udløserknap, tag et foto, og vis URI'en for det optagne billede i en Image-komponent. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Kameraadgang med expo-camera”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Kameraadgang med expo-camera
- Aflæsning af GPS-position med expo-location
- Planlægning af lokale notifikationer
- Elegant håndtering af tilladelser