Özet - Görsel seçici
- React Native kursu
- İleri seviye
- Ders 18/83
- 5 dk
expo-image-picker ve galeri/kamera seçimini birleştirerek bir profil foto uygulaması yazarsın.
Özet - Görsel seçici
Bu grupta expo-image-picker paketini kurmayı, galeri izni istemeyi, launchImageLibraryAsync ile galeriden seçmeyi, launchCameraAsync ile kamerayla çekmeyi ve görseli ekranda göstermeyi gördün. Bir görsel seçim akışı bu beş parçadan oluşur.
Özette izin, galeri seçimi ve görsel göstermeyi tek bir uygulamada birleştireceğiz. Bu üç parça birlikte gerçek bir profil fotoğrafı akışı oluşturur. Şimdi bunları birleştirelim.
Uygulama Özet - Galeriden görsel seç
pickImage işlevini tamamla. const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images }) çağır. Eğer result.canceled ise return null. Değilse return result.assets[0].uri.
Başlangıç kodu
import * as ImagePicker from 'expo-image-picker';
export async function pickImage() {
// galeriden görsel seç ve uri döndür
}Örnek çözüm
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
});
if (result.canceled) return null;
return result.assets[0].uri;Uygulama Özet - Görseli göster
Boş showImage işlevini tamamla. Parametre olarak uri alır. return <Image source={{{ uri }}} style={{{ width: 200, height: 200, resizeMode: 'cover' }}}} /> döndür.
Başlangıç kodu
import { Image } from 'react-native';
export function showImage(uri) {
// görseli 200x200 kabında cover ile göster
}Örnek çözüm
return (
<Image
source={{ uri }}
style={{ width: 200, height: 200, resizeMode: 'cover' }}
/>
);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Galeri izin işlevini yaz
const permission = await ImagePicker.____();const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();Açıklama: Bu işlev galeri izni ister.
2 Akış parçasını rolüne eşle
| Kavram | Anlamı |
|---|---|
requestMediaLibraryPermissionsAsync |
Galeri izni |
launchImageLibraryAsync |
Galeriden seçer |
launchCameraAsync |
Kamerayla çeker |
assets[0].uri |
İlk görsel yolu |