En sık kullanılan nesnelerden biri sizin için hiç kuşkusuz Platform nesnesi olacaktır. Platform nesnesi ile platform(iOS, Android v.b.) özellinde işlemler yapmanız gerektiği durumlarda kullanabilirsiniz. Şimdi detaylıca bu Platform nesnesini nasıl kullanabileceğimize bakalım. Platform nesnesi react-native paketi altında yer aldığından bu paketi import ederek kullanabilirsiniz şimdi Platform nesnesini ne gibi işler için kullanabileceğimize bir gözatalım.
|
1 2 3 4 5 |
import {Platform, StyleSheet} from 'react-native'; const styles = StyleSheet.create({ height: Platform.OS === 'ios' ? 200 : 100, }); |
Gördüğünüz gibi style tanımlarken height özelliğine değeri set etmeden önce eğer mobil işletim sistemi ios ise 200 değeri ayarlanıyor değilse 100 değeri ayarlanıyor. Yani burada ios işletim sistemli cihazlara özel bir konfigürasyon durumu söz konusu.
Platfrom.OS özelliğinden gelebilecek diğer değerler: ios, android, macos, windows, web
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import {Platform, StyleSheet} from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, ...Platform.select({ ios: { backgroundColor: 'red', }, android: { backgroundColor: 'blue', }, }), }, }); |
Bu örnekte ise Platfrom select fonksiyonu yardımıyla geriye istediğimiz türde çıktı dönderebiliyoruz burada ios ve android işletim sistemleri için style özelliklerinden biri olan backgroundColor özelliği eğer ios ise red veya android ise blue ayarlanıp geri dönderilecek şekilde kurgulanmıştır ve container style’i bu koşula göre backgroundColor özelliğine sahip olmuş olacak.
Platform.select fonksiyonu içerisinde tanımla yapabileceğiniz sistemler: ios, android, macos, windows, web, default
|
1 2 3 4 5 6 |
const Component = Platform.select({ ios: () => require('ComponentIOS'), android: () => require('ComponentAndroid'), })(); <Component />; |
Platform spesifik component hazırlıyorsanız Platform select yardımıyla her platform için geliştirdiğiniz ayrı component dosyalarını çağırıp kullanabilirsiniz.
İlk Yorumu Siz Yapın