Özet - Görsel seçici

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.

Örnek çözümü göster

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.

Örnek çözümü göster

return (
  <Image
    source={{ uri }}
    style={{ width: 200, height: 200, resizeMode: 'cover' }}
  />
);

Kendini test et

Galeri izin işlevini yaz

const permission = await ImagePicker.____();

Cevabı göster

const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();

Akış parçasını rolüne eşle

requestMediaLibraryPermissionsAsync

Galeri izni
launchImageLibraryAsync

Galeriden seçer
launchCameraAsync

Kamerayla çeker
assets[0].uri

İlk görsel yolu

Sıradaki ders: expo-location

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler