onLayout
- React Native kursu
- Başlangıç
- Ders 80/116
- 5 dk
onLayout ile yerleşim olayını öğrenirsin.
onLayout olayı
onLayout bir bileşen ekrana yerleştirildiğinde çağrılır. Yer, boyut ve konum bilgisi verir; bu bilgiler çoğu zaman özel çizimler ya da ölçülü düzenler için kullanılır.
Örnek: <View onLayout={'{(event) => setWidth(event.nativeEvent.layout.width)}'}>. Burada layout.width, View'ın genişliğini verir. Bu bilgiyi state'e kaydedip başka hesaplar için kullanabilirsin.
onLayout yalnızca yerleşim değiştiğinde çağrılır; render başına değil. Bu yüzden ekran döndürme ya da pencere yeniden boyutlandırma olaylarını yakalamak için idealdir.
layout nesnesini oku
onLayout işleyicisine gelen event'in nativeEvent.layout alanı dört değer taşır: x, y, width, height.
x ve y bileşenin ebeveynine göre konumudur. width ve height ise ölçülen boyutlardır. Bunlar state'e kaydedilerek ileride hesapta kullanılabilir.
Örnek: bir grafiğin genişliği, içerideki View'ın onLayout'undan alınıp çizim hesabında kullanılabilir. Bu, responsive grafikler için yaygın bir desendir.
Uygulama Genişliği state'e kaydet
Bir App bileşeni yaz. useState(0) ile width tanımla. <View>'a onLayout ver; event.nativeEvent.layout.width'i setWidth ile kaydet. İçine <Text>{`{width}`}</Text> koy. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { View, Text } from 'react-native';
// genişliği state'e kaydeden kodu buraya yazÖrnek çözüm
function App() {
const [width, setWidth] = useState(0);
return (
<View onLayout={(event) => setWidth(event.nativeEvent.layout.width)}>
<Text>{width}</Text>
</View>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 onLayout ne zaman çağrılır?
- Yerleşim değiştiğinde
- Her render'da
- Sadece butona basınca Doğru cevap
- Yalnızca ilk açılışta
Açıklama: yerleşim her değiştiğinde onLayout tetiklenir.
2 onLayout ekle
import { View, Text } from 'react-native';
function App() {
return (
<View ____={(event) => console.log(event.nativeEvent.layout.width)}>
<Text>Ölç</Text>
</View>
);
}import { View, Text } from 'react-native';
function App() {
return (
<View onLayout={(event) => console.log(event.nativeEvent.layout.width)}>
<Text>Ölç</Text>
</View>
);
}Açıklama: onLayout yerleşim olayını dinler.
3 onLayout parçalarını eşle
| Kavram | Anlamı |
|---|---|
onLayout |
Yerleşim olayını dinler |
nativeEvent.layout |
Yerleşim verisi |
width |
Yatay boyut |
height |
Dikey boyut |