Native özellikler
- React Native kursu
- İleri seviye
- Ders 81/83
- 6 dk
Kamera, konum ve bildirim native özelliklerini eklersin.
Kamera ve konum native hook'ları
Bu derste iki native özellik ekleriz: kamera ve konum. expo-camera ile fotoğraf çeker, expo-location ile GPS koordinatı alırız. Her ikisi de önce izin ister; kullanıcı onaylamadan çalışmaz.
Bir useCamera hook'u yazarak fotoğraf state'ini ve çekme işlevini sarmalarız. useLocation hook'u da benzer şekilde konum state'ini tutar. Bu hook'lar App'e eklenince saha görevlisi fotoğraf çekip konum kaydedebilir. Native modüller JS tarafına bridge üzerinden gelir; izinler ise Permissions API'siyle istenir. Bu, ileri seviye uygulamaların olmazsa olmazıdır.
useCamera hook'u
useCamera, fotoğraf çekme mantığını saran özel hook'tur. İçinde photo state'i ve takePhoto işlevi tutar. takePhoto çağrılınca Camera.takePictureAsync() çalışır ve sonuçu setPhoto ile yazar.
Örnek iskelet: export function useCamera() { const [photo, setPhoto] = useState(null); const takePhoto = async () => { const r = await Camera.takePictureAsync(); setPhoto(r.uri); }; return { photo, takePhoto }; }. Bu desen, native API'yi React'in state modeline uyarlar. Bileşenler const { photo, takePhoto } = useCamera() ile sade bir arayüz alır; native karmaşıklık arkada kalır.
Uygulama useCamera hook'unu ekle
Önceki kodun üstüne bir useCamera hook'u ekle. useState(null) ile photo state'i tut. takePhoto adlı async işlev tanımla; içi setPhoto çağrısı içersin. Hook { photo, takePhoto } döndürsün.
Başlangıç kodu
import React, { useState, createContext, useContext } from 'react';
import { Text, View } from 'react-native';
const AuthContext = createContext(null);
export function useAuth() { return useContext(AuthContext); }
function App() {
const [tasks, setTasks] = useState([]);
const [user, setUser] = useState(null);
return (
<AuthContext.Provider value={{ user, setUser }}>
<View>
<Text>Saha Raporu</Text>
</View>
</AuthContext.Provider>
);
}
// useCamera hook'unu buraya ekleÖrnek çözüm
import React, { useState, createContext, useContext } from 'react';
import { Text, View } from 'react-native';
const AuthContext = createContext(null);
export function useAuth() { return useContext(AuthContext); }
function App() {
const [tasks, setTasks] = useState([]);
const [user, setUser] = useState(null);
return (
<AuthContext.Provider value={{ user, setUser }}>
<View>
<Text>Saha Raporu</Text>
</View>
</AuthContext.Provider>
);
}
export function useCamera() {
const [photo, setPhoto] = useState(null);
const takePhoto = async () => {
setPhoto('photo-uri');
};
return { photo, takePhoto };
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Akışı rolüne eşle
| Kavram | Anlamı |
|---|---|
expo-camera |
Fotoğraf çeker |
expo-location |
GPS koordinatı |
Permissions |
İzin ister |
useCamera |
State'i sarmalar |
2 Camera takePictureAsync çağrısı
const r = await Camera.____();const r = await Camera.takePictureAsync();Açıklama: takePictureAsync fotoğraf çeker.
3 Native özellik çalışmadan önce ne istenir?
Camera.requestPermissionsAsync()- İzin Doğru cevap
- Parola
- Ödeme
- E-posta
Açıklama: Kamera ve konum izin ister.