Ön/arka kamera
- React Native kursu
- İleri seviye
- Ders 10/83
- 5 dk
Ön ve arka kamera değişimini öğrenirsin.
Ön ve arka kamera
Telefonun iki kamerası vardır: ön (selfie) ve arka. expo-camera, bu seçimi CameraType sabitiyle yapar. CameraType.back arka kamera, CameraType.front ön kameradır. Camera bileşenine type prop olarak verilir.
Seçimi state'te tutarsın: const [type, setType] = React.useState(CameraType.back). Düğmeye basınca setType(type === CameraType.back ? CameraType.front : CameraType.back) ile değiştirirsin. Bu basit toggle kalıbı, kullanıcıya tek dokunuşla kamera değiştirme imkânı verir.
Toggle kalıbı
Kamera değiştirme düğmesi bir toggle işlevine bağlanır. İşlev, mevcut type değerine bakar ve tersine çevirir. Yazım: setType(prev => prev === CameraType.back ? CameraType.front : CameraType.back). Burada prev önceki değeri temsil eder.
State güncellemede prev kullanmak en sağlam yöntemdir; çünkü ardışık çağrılarda her zaman güncel değeri alır. Düğmenin onPress'ine bu işlevi verirsin. Kullanıcı düğmeye her bastığında kamera ön ve arka arasında geçiş yapar; bu, modern kamera uygulamalarının standart bir özelliğidir.
Uygulama Kamera değiştirme düğmesi ekle
Boş toggleCamera işlevini tamamla. setType(prev => prev === CameraType.back ? CameraType.front : CameraType.back) yaz. type ve setType parametre olarak verilir.
Başlangıç kodu
import { CameraType } from 'expo-camera';
export function toggleCamera(type, setType) {
// kamera türünü değiştir
}Örnek çözüm
setType(prev => prev === CameraType.back ? CameraType.front : CameraType.back);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 type prop'unu yaz
<Camera ____={type} style={{ flex: 1 }} /><Camera type={type} style={{ flex: 1 }} />Açıklama: type prop kamera seçimini alır.
2 Sabitleri anlamına eşle
| Kavram | Anlamı |
|---|---|
CameraType.back |
Arka kamera |
CameraType.front |
Ön kamera |
type |
Seçim prop'u |
setType |
Seçimi günceller |
3 setType ile toggle yazarken ne kullanılır?
setType(?? => ?? === CameraType.back ? CameraType.front : CameraType.back)- prev Doğru cevap
- current
- next
- type
Açıklama: prev güncel değeri temsil eder.