Dosya uzantısı
- React Native kursu
- Başlangıç
- Ders 103/116
- 5 dk
.ios.js ve .android.js ile platform özelinde dosya öğrenirsin.
Dosya uzantısı
React Native, dosya uzantılarına bakarak platforma özgü dosyaları otomatik seçer. Button.ios.js ve Button.android.js adında iki dosyan varsa, import Button from './Button' yazdığında React Native hangi platformda olduğunu bilir ve doğru dosyayı yükler.
Uzantıyı içe aktarma yoluna yazmazsın; yalnızca taban adı ./Button yeterlidir. Bu yöntem, iki platform için tamamen farklı bileşenler yazman gerektiğinde kullanışlıdır. Her dosya aynı arabirimi dışa aktarmalıdır.
Uygulama Sıra sende: platform dosyasını içe aktar
MyButton bileşenini './MyButton' yolundan içe aktar (uzantı olmadan). Bileşeni bir <View> içinde <MyButton title="Tıkla" /> olarak kullan.
Başlangıç kodu
// MyButton'ı uzantısız içe aktar
function Screen() {
return (
<View>
{/* MyButton'ı kullan */}
</View>
);
}Örnek çözüm
import MyButton from './MyButton';
import { View } from 'react-native';
function Screen() {
return (
<View>
<MyButton title="Tıkla" />
</View>
);
}Ortak arabirim
Dosya uzantısı yöntemini kullanırken her iki dosya da aynı arabirimi dışa aktarmalıdır. Yani Button.ios.js ve Button.android.js ikisi de aynı adda bir bileşen dışa aktarır. Böylece içe aktaran taraf, hangi dosyanın yüklendiğini bilmek zorunda kalmaz.
İki dosya farklı uygulamalar içerebilir: iOS sürümü TouchableOpacity, Android sürümü TouchableNativeFeedback kullanabilir. Önemli olan, ikisinin de aynı props'ları kabul etmesi ve aynı davranışı göstermesidir. Bu, platform farkını kullanıcıdan gizler.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Button.ios.js dosyası ne zaman yüklenir?
import Button from './Button';- Yalnızca iOS'ta Doğru cevap
- Yalnızca Android'de
- Web ortamında
- Her zaman
Açıklama: .ios.js uzantısı yalnızca iOS'ta yüklenir.
2 Boşluğu doldur: uzantısız içe aktarma
import { Button } from ____;import { Button } from './Button';Açıklama: Uzantıyı yazmadan içe aktarırsın; RN otomatik seçer.
3 Eşleştir: uzantı ve platform
| Kavram | Anlamı |
|---|---|
.ios.js |
iOS dosyası |
.android.js |
Android dosyası |
.js |
ortak dosya |