“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 8. kısmıdır. Bir önceki makalede (Part 7), React Native’de kullanılan en iyi 10 kütüphaneleri ve mobil projelerimizde nasıl kullanacağımızı anlattım.
React Native’de Tab Navigation Kullanımı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.
Muhtemelen mobil uygulamalarda en yaygın gezinme tarzı sekme tabanlı gezinmedir. Mobil uygulamalarının ekranlarının altındaki veya üstteki başlığın altında (veya hatta bir başlık yerine) sekmeler olabilir.
Bu yazımızda Tab Navigation kullanmak için createBottomTabNavigator’ı kapsar. Ayrıca, uygulamanıza sekmeler eklemek için createMaterialBottomTabNavigator ve createMaterialTopTabNavigator’ı da kullanabilirsiniz.
Devam etmeden önce ilk olarak @ react-navigation/bottom-tabs yükleyin:
// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';
// (...)
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
} else if (route.name === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
Bunu inceleyelim:
tabBarIcon, alt sekme gezgininde desteklenen bir seçenektir. Bu nedenle, onu options prop’undaki ekran bileşenlerimizde kullanabileceğimizi biliyoruz, ancak bu durumda, kolaylık sağlamak için simge yapılandırmasını merkezileştirmek için Tab.Navigator’ın screenOptions prop’una koymayı seçtik.
tabBarIcon, odaklanmış durum, renk ve boyut parametreleri verilen bir işlevdir. Yapılandırmada daha aşağıya bir göz atarsanız, tabBarOptions ve activeTintColor ve inactiveTintColor görürsünüz. Bunlar varsayılan olarak iOS platformu varsayılanlarıdır, ancak bunları buradan değiştirebilirsiniz. TabBarIcon’a aktarılan renk, odaklanan duruma bağlı olarak aktif veya pasif olandır (odaklanma etkindir). Boyut, sekme çubuğunun beklediği simgenin boyutudur.
CreateBottomTabNavigator yapılandırma seçenekleri hakkında daha fazla bilgi için tam API referansını okuyun.
Simgelere rozetler ekleyin
Bazen bazı simgelere rozetler eklemek isteriz. Bunu yapmak için tabBarBadge seçeneğini kullanabilirsiniz:
UI açısından bu bileşen kullanıma hazırdır, ancak yine de React Context, Redux, MobX veya etkinlik yayıcıları kullanmak gibi rozet sayısını başka bir yerden düzgün bir şekilde geçirmenin bir yolunu bulmanız gerekir.
Lütfen bize görüşlerinizi bildirmekten çekinmeyin.
“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 7. kısmıdır. Bir önceki makalede (Part 6), React Native Animation, mobil uygulama geliştirirken yazılara, resimlere vb. arayüz bileşenlerine, animasyonu nasıl uygulayacağımızı anlattım.
React Native’de kullanılan en iyi 10 kütüphaneleri ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.
React Native topluluğu çok büyük. Çoğu web geliştiricisi, React Native’i android ve iOS için iki dilden öğrenmeyi tercih ediyor. Hemen hemen her geliştirme çerçevesinde, geliştirmeyi herhangi bir üçüncü taraf kütüphane (library) kullanmadan yapmak gerçekten zordur. React.js’ye aşina iseniz, React Native’de birçok ortak kütüphane (library) bulacaksınız.
Bu blog gönderisinde, uygulamalarınızda kullanılabilecek en iyi 10 React Native kütüphanelerini (libraries) listeliyoruz. Bu kütüphaneler (libraries) iyi test edilmiştir ve başlaması kolaydır. Ayrıca bu kütüphanelere (libraries) küçük bir açıklama ekliyoruz. Daha detaylı bilgi almak için github sayfalarına bakabilirsiniz.
1. Axios
Axios, javascript uygulamaları için en popüler HTTP istemci kütüphanelerden biridir. Çoğu uygulama, web’e GET, POST, PUT veya başka herhangi bir Http isteği aracılığıyla bağlanmayı gerektirir. Axios, bu istekleri yazmayı gerçekten kolaylaştırır. Ayrıca, istek başlığını ve hata işlemlerini yapılandırma gibi birçok farklı seçenek sunar.
Npm, bower veya yarn ile kurabilirsiniz. Belgeler de iyi korunur ve MIT lisanslı bir kütüphanedir. Axios hakkında daha fazla bilgi edinmek için Github sayfasını kontrol edin.
2. Redux ve react-redux
Redux, React.js’de durum yönetimi için kullanılır. Varsayılan durum yönetimi, yüksek oranda ölçeklenebilir uygulamalar için yeterince iyi değildir. Redux’u daha basit hale getirmek için kullanabilirsiniz. Redux ve React-Redux, her ikisi de farklı kütüphanelerdir. Redux herhangi bir Javascript uygulamasıyla kullanılabilir. React Redux kütüphanesi, redux üzerinden bir bağlanmadır. Bu kütüphane hem React.js hem de React Native ile kullanılabilir. React Redux bir npm paketi olarak mevcuttur ve mevcut bir projeye kolayca entegre edilebilir. Redux mevcut bir projeye eklenebilir, ancak bunu proje geliştirmenin başlangıcında eklemek en iyi uygulamadır.
Native Base, bir UI bileşeni React-Native kütüphanesidir. Uygulamanızın UI bileşenini hızlı bir şekilde başlatmak istiyorsanız, bu kullanışlı bir kütüphanedir. Bu kütüphanenin avantajlarından biri, onu native React Native uygulamalarıyla veya expo ile kullanabilmenizdir. Hem Android hem de iOS uygulamaları için güzel UI bileşenleri oluşturmak için birçok seçeneğe sahiptir. Belgeler iyi korunur ve büyük bir topluluk, tüm React-Native sürümler için onu güncel tutmaktadır.
Push notifications hem Android hem de IOS platformlarında farklıdır. Bu Kütüphane, hem Android hem de iOS’ta local ve remote bildirimleri uygulamayı kolaylaştırır. Planlanmış bildirim, bildirim için özel sesler, bildirimler için öncelik ayarlama, önem ayarlama vb. Gibi farklı özelleştirme seçenekleri sunar. Birkaç yöntem yalnızca Android’de mevcuttur ve çok azı yalnızca iOS’ta kullanılabilir, Github sayfasında iyi belgelenmiştir.
Bu makaleyi yazarken, bu kütüphanenin github’da 15000’den fazla yıldızı var. Bu, bir mobil uygulamada gerekli olan hemen hemen tüm farklı UI bileşenlerini içeren bir UI araç takımı koleksiyonudur. Bu, React Native elementlerini gösteren bir expo uygulamasıdır. Bu, GitHub sayfasının bağlantısıdır.
6. React Native Config
Bir yapılandırma dosyası kullanmak her zaman iyi bir geliştirme uygulamasıdır. Ön uç, arka uç veya mobil uygulamalar: yapılandırma dosyası kodunuzu çok daha kolay hale getirebilir. Yapılandırma dosyası, tüm ortam ayarları değerlerini saklamak için kullanılır. Örneğin, uygulamanızı geliştirme, hazırlama ve üretimde farklı bir API uç noktasında test etmek isteyebilirsiniz.
Farklı ortamlar için farklı yapılandırma dosyaları oluşturabilir ve sahne, üretim ve geliştirme arasında kolayca geçiş yapabilirsiniz. React Native Config kütüphanesi, React Native IOS ve Android uygulamalarında yapılandırma değişkenleri oluşturmayı kolaylaştırır. Aynı yapılandırma dosyasını hem Android hem de IOS için kullanabilirsiniz.
Uygulamanız kamera, mikrofon vb. Gibi herhangi bir iPhone veya Android donanımı veya kişiler, mevcut konum vb. Gibi herhangi bir özel telefon öğesi kullanıyorsa, kullanıcıdan izin istemeniz gerekir. İzni kabul etmek veya reddetmek kullanıcının sorumluluğundadır. İzin işleme hem Android hem de iOS’ta farklıdır. React Native Permissions kütüphanesi, uygulamayı kolaylaştırır. Farklı izin türlerini algılayabilir ve ayrıca kullanıcı izni yetkilendirmiş veya reddetmiştir.
IOS için apple maps kullanmanız ve Android için Google maps kullanmanız gerekir. Her ikisi de tamamen farklıdır ve aynı özelliği IOS ve Android’de uygulamak için her iki harita bileşeni hakkında bilgi gerektirir. Google maps’i bir iOS projesinde kullanabilirsiniz, ancak apple, apple maps kullanmanızı önerir.
React Native Maps kütüphanesi, her iki harita görünümünü de entegre etmeyi kolaylaştırır. Kodunuzda yalnızca bir basit <MapView /> etiketi kullanarak, birçok karmaşık özelliği hem Android hem de IOS’ta aynı anda uygulayabilirsiniz. İşaretçi ekleme, ekstra animasyonlu API bileşenleri ekleme, bölgeyi veya konumu izleme, programlı olarak konum değişikliği, yakınlaştırma vb. Gibi birçok özelleştirilebilir seçeneğe sahiptir. Çok az şey yalnızca Android’de ve çok azı IOS’ta mevcuttur.
İşlevleri hakkında daha fazla bilgi edinmek için github deposunu kontrol edebilirsiniz.
9. React Native Net Info
Uygulamanız ağla ilgileniyorsa, bu mutlaka sahip olunması gereken bir kitaplıktır. Bu kitaplık, bağlı ağ türünü ve kalitesini kontrol etmek için kullanılır. Tüm IOS, Android ve Windows platformlarında mevcuttur. Bunu npm veya iplik kullanarak kurabilirsiniz ve işte bu kadar. Kitaplığı içe aktarın ve yalnızca bir satır kod kullanarak ağ durumunu kontrol edebilirsiniz.
Bu modül size bağlantı türü (2g, 3g, 4g, wifi vb.), Ağın erişilebilir olup olmadığı, ağın detayı (SSID, güç, IP adresi vb.) Gibi birçok gelişmiş seçenek sağlayabilir. ve daha fazlası. Kütüphane hakkında daha fazla bilgi edinmek için dokümantasyonu inceleyebilirsiniz.
10. React Native UI Kitten
UI Kitten bir UI öğeleri kütüphanesidir. Eva tasarım sistemine göre geliştirilmiştir. Bu kütüphanenin ana avantajı, hem açık hem de karanlık modlara sahip olması ve uygulamayı yeniden yüklemeden çalışma zamanında bu temalar arasında geçiş yapabilmenizdir. Başlamak için 20’den fazla bileşene sahiptir. Ayrıca, başlamak için 40’tan fazla karanlık mod ve ışık modu temasına sahip bir başlangıç uygulaması sağlar.
480’den fazla açık kaynak simgesiyle aynı topluluk tarafından geliştirilen eva-icons kütüphanesini de kontrol edebilirsiniz. Bu, kütüphanenin GitHub sayfasıdır.
Bu En İyi 10 React Native Kütüphanelerinin, React Native projelerinde kullanabilmeniz için bir üçüncü taraf kütüphanesini daha hızlı almanıza yardımcı olacağını umuyoruz. Herhangi bir kütüphaneyi kullanmadan önce yıldızları, aktif topluluğu ve şu anda açık olan konuları kontrol etmek gerçekten en iyi uygulamadır. Ayrıca, ana projeye entegre etmeden önce kütüphaneyi daima örnek bir uygulama ile deneyin veya demo uygulamalarını deneyin.
Lütfen bize görüşlerinizi bildirmekten çekinmeyin.
“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 6. kısmıdır. Bir önceki makalede (Part 5), React Native API Integration, uzak URL’lerden veri alma yollarını anlattım.
Mobil uygulama geliştirirken yazılara, resimlere vb. arayüz bileşenlerine, animasyonu nasıl uygulayacağımızı öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.
Mobil uygulamada kullanıcı deneyimini iyileştirmenin en iyi yollarından biri animasyon kullanmaktır. Android ve iOS yerel geliştirmede, animasyon farklı şekilde ele alınır. Ayrıca, Android’de bulunan tüm animasyonlar iOS’ta uygulanamaz ve bunun tersi de geçerlidir. React Native Animation, animasyonu hem Android hem de iOS’ta uygulamak için aşağıdaki iki API’yi sağlar:
Animated API
LayoutAnimation API
Bu API’lerin nasıl kullanılacağını örneklerle öğreneceğiz.
Animated API
Animated API’yi View, Text, ScrollView, Image, FlatList ve SectionList ile kullanabiliriz. Animasyonlu bir bileşen oluşturmak için Animated.createAnimatedComponent() yöntemini de kullanabiliriz.
Bu örnekte, 3 saniyelik bir süre boyunca “genişlik” “0” ile “100” arasında bir görünüm oluşturacaktır. “Görünüm” yerine “Animated.View” kullandığımıza dikkat edin. Ayrıca, “genişlik” değerini değiştirmek için “Animated.timing” yöntemini kullanıyoruz. “Genişlik”, bileşenin “durumunda” tanımlanan bir değerdir. Değeri, “Animated.View” öğesinin genişliğini ayarlamak için kullanılır. Aynı yaklaşımı kullanarak, bir görünümün hem yüksekliğini hem de genişliğini canlandırabiliriz, bir görünümün opaklığına animasyon ekleyebiliriz vb. Bu, durumu sürekli olarak değiştirmekle aynı değildir. Durumu sürekli değiştirirsek, bileşeni tekrar tekrar yeniden oluşturacak ve bu da görünümün performansını etkileyecektir. Animation API, animasyonu daha verimli göstermek için farklı bir mekanizma kullanır.
Animasyon yapılandırması:
Animated, üç farklı animasyon türü sağlar:
Animated.decay(): Bu tür animasyonlar bir başlangıç hızıyla başlar ve yavaş yavaş son hıza doğru yavaşlar.
Animated.spring(): Spring fiziği model animasyonu.
Animated.timing(): Belirli bir süre boyunca bir değeri canlandırır. Bu, “Animasyonlu” nun en yaygın kullanılan işlevlerinden biridir.
Animasyon değerleri:
Yukarıdaki örnekte Animated.value kullandık. Animated.Value(), tek değerler için kullanılır. Bu yöntemin dışında Animated.ValueXY() de var. Bu, vektörler için kullanılır.
Bir animasyonu başlatmak için start() yöntemi kullanılır. Bu yöntem isteğe bağlı olarak, tamamlandığında çağrılacak olan bir tamamlama işleyici bloğu alır. Önceden tanımlanmış değerlerle tamamlanmadan önce bir animasyonu durdurmak için stop() yöntemini de çağırabiliriz. Örneğin, herhangi bir kullanıcı etkileşiminde veya başka bir animasyon başlarsa stop() ‘u çağırmamız gerekebilir. Tamamlama bloğunda animasyonun normal şekilde bitip bitmediğini veya stop() çağrılıp çağrılmadığını tespit edebiliriz. Bize tamamlama bloğunda, normal tamamlama için “true” ve “stop()” tamamlama için “false” olacak olan “finished” adlı bir bayrak verir.
Animasyonları birleştirin:
Yeni bir tane oluşturmak için iki hareketli değeri birleştirebiliriz. Animasyonları birleştirme yöntemleri şunlardır:
Mimik :
Animasyonla çalışıyorsak, jestlerle uğraşmak zorunda kalabiliriz. Hareket olaylarını animasyonlu değerlerle eşlemek için Animated.event() yöntemi kullanılır. Bunun için yapılandırılmış harita sözdizimi kullanılır.
Mevcut animasyon değerini okumak:
Bazen bir görünümün mevcut animasyon değerini okumamız gerekebilir. Ancak daha önce de açıkladığım gibi, bu durum değerini sürekli güncellemek gibi bir şey değil. Bu esas olarak yerel çalışma zamanında yapılır ve bu nedenle mevcut değeri izlemek zordur. Bunun için kullanabileceğimiz iki yol aşağıdadır:
spring.stopAnimation(callback): Animasyonu durdurur ve geri aramayı başlatır. Bu geri arama, nihai değeri tutacaktır.
spring.addListener(callback): Bu durumda, geri arama eşzamansız olarak çağrılacaktır. Geri arama ile animasyonun son bir değerini alacağız. Bu, animasyonun mevcut durumuna göre bir şey işliyorsak kullanışlıdır.
LayoutAnimation API:
LayoutAnimation, Animated API gibi pek çok özellik sağlamaz, ancak çoğu durumda kullanışlıdır. Temel olarak, görünümleri bir sonraki işlemede yeni konumlarına canlandıracaktır. Bu, flexbox mizanpaj güncellemeleri için ve ayrıca değişiklikler herhangi bir ata görünümünü etkiliyorsa kullanışlıdır. Normalde, bir durumdaki değerleri değiştirerek kullanırız.
Android’de, yalnızca aşağıdaki yapılandırmayı eklersek çalışacaktır:
Sadece bir satır kod ekliyoruz ve bu da animasyonu görünüme ekliyor. Çok sayıda görünümümüz varsa, tüm görünümleri aynı anda canlandırmak için özellikleri durumda depolayabilir ve durumu “LayoutAnimation” kullanarak güncelleyebiliriz.
Hem “LayoutAnimation” hem de “Animated” api’ler bir uygulamada kullanışlıdır. Kullanım durumlarına bağlıdır. “Animated” oldukça güçlüdür ancak her türden animasyon için çok sayıda kod yazmayı içerir. Ancak animasyona daha fazla kontrol sağlar. “LayoutAnimation”, çok fazla kod yazmadan ve herhangi bir görünümü değiştirmeden yeniden oluşturma sırasında animasyon yapmak için harikadır. Görünüm özelliklerini state’de depolayın ve animasyonu yapmak için state’i değiştirin.
Makale, React Native Animation API’nin kitlelere hitap eden muhteşem bir uygulama geliştirmek için nasıl kullanılabileceğini açıkladı.
Lütfen bize görüşlerinizi bildirmekten çekinmeyin.
“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 5. kısmıdır. Bir önceki makalede (Part 4), React Native ‘in en temel yapı taşı olan UI Components (Kullanıcı Arayüzü Bileşenleri) ‘ni anlattım.
Mobil uygulama verilerini sunucu tarafında bir veritabanı yönetim sistemi üzerinde saklamanın ve erişmenin en kolay yolu RESTful API veya web servisi tarzı çözümlerdir. Bu makalede, internetteki bir veriye erişip, o veriyi arayüzümüzde göstermekle alakalı işlemleri öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.
React Native API Integration, uzak URL’lerden veri almanın en kolay yollarından biridir. API entegrasyonunu yalnızca GET isteğini kullanmak için değil, aynı zamanda POST, PUT, DELETE gibi diğer HTTP isteklerini tek bir kod parçası kullanarak hem Android hem de iOS’ta kolayca kullanabiliriz. Bu makalede, bir örnekle bir GET isteğinin nasıl yapılacağını öğreneceğiz. Uygulamamız bazı fake verileri getirecek ve uygulamada dolduracaktır.
Fetch API:
React native, HTTP isteklerini işlemek için Fetch API adlı bir API kullanır. Bu, web uygulamalarında kullanılan API’nin aynısıdır. Daha önce “fetch” seçeneğini kullandıysanız, bu kılavuzun anlaşılması daha kolay olacaktır. Verileri almak için “fetch()” adı verilen küresel bir yöntem kullanılır. Bu, zaman uyumsuz bir yöntemdir. En basit şekli yalnızca bir argüman alabilir: getirdiğimiz verilerin URL’si. Verileri eşzamansız olarak almak ve getirme tamamlandıktan sonra bu veriler üzerinde işlem yapmak için kullanabiliriz. Örneğin :
fetch('https://websiteurl.com/data.json');
Bu kadar.
Request ve Response nesneleriyle ilgilenir. Yukarıda gördüğünüz gibi, fetch en az bir argüman olarak kullanılabilir. Bir Promise nesnesi döndürür. Bu nesneye verilen yanıtı çözer. Yanıtı aldığımızda, diğer body parametrelerine erişebiliriz.
Fetch API’si için Diğer Değişkenler:
Fetch ayrıca isteği özelleştirmek için kullanılabilecek bir saniye argümanı alır. ‘POST’, ‘GET’, ‘PUT’ gibi istek türlerini değiştirebiliriz ve ayrıca isteğin üstbilgisini ve gövdesini özelleştirebiliriz. Örneğin :
Bu örnekte, başlık ve gövde değerleriyle bir ‘POST’ isteği yapıyoruz. Gövde JSON tipindedir.
Response Datalarını İşleme:
Yukarıda açıklandığı gibi, fetch tarafından döndürülen Promise nesnesini kullanarak yanıtı ele alabiliriz. Bu sözün üstesinden gelmek için ‘then’ ya da herhangi bir ‘async await’ işlevini kullanabiliriz.
Bu örnekte, verileri alıyoruz ve JSON’u kullanarak verileri “json” a dönüştürüyoruz. Async await örneğini makalenin sonunda göstereceğim.
Request Özellikleri ve Metodları:
Request() yapıcısı yeni bir Request nesnesi oluşturmak için kullanılır. İstek nesnesi alıyorsanız, nesnenin çeşitli özelliklerine erişin. Aşağıda bu özelliklerin ve her birinin kısa ayrıntılarını bulabilirsiniz.
Özellikler (read-only): Request.cache: isteğin önbellek modunu al. Request.context: İsteğin bağlamını al Request.credentials: isteğin kimlik bilgilerini alın Request.destination: istek hedefini al Request.headers: başlık nesnesini al Request.integrity: İsteğin bütünlük değerini al Request.method: istek yöntemini alın ör. GET, POST, PUT vb. Request.redirect: yönlendirmenin nasıl ele alınacağına ilişkin modu edinin Request.referrer: isteğin yönlendiricisini al Request.referrerPolicy: isteğin yönlendirme politikasını alın Request.url: İsteğin URL’sini al
Metodlar:
Aşağıda, kolayca kullanabileceğiniz bazı Request nesnesi yöntemleri verilmiştir.
Request.clone(): mevcut istek nesnesini klonlamak için kullanılır. Body.arrayBuffer(): ArrayBuffer türündeki bir gövde nesnesiyle çözümlenecek bir söz verir Body.blob(): Blob türünde bir gövde nesnesiyle çözümlenecek bir söz verir Body.formData(): FormData türündeki bir gövde nesnesiyle çözümlenecek bir söz verir Body.json(): Json türünde bir gövde nesnesiyle çözümlenecek bir söz verir Body.text(): Metin türünde bir gövde nesnesiyle çözümlenecek bir söz verir
Response Özellikleri ve Metodları:
Request’e benzer bir şekilde, Response nesnesi de aşağıda kontrol edebileceğiniz bazı özelliklere ve yöntemlere sahiptir.
Özellikler (read-only): Response.headers: Yanıtın headers nesnesini al Response.ok: Yanıtın başarılı olup olmadığını tanımlamak için Boolen değeri. Yanıt 200 ile 299 arasındaysa bir yanıt başarı olarak adlandırılır Response.redirected: Yeniden yönlendirilmiş bir yanıt olup olmadığını tanımlar Response.status: yanıtın durum kodu Response.statusText: Yanıt değerinin durum mesajı veya metin temsili. Response.type: yanıt türü Response.url: yanıtın URL’si Response.useFinalURL: Yanıtın nihai URL’si olup olmadığını tanımlayan Boolean değeri Body.body: Body içeriğinin bir ReadableStream’ini göstermek için kullanılan basit bir alıcı. Body.bodyUsed: Body’nin henüz bir yanıtta kullanılıp kullanılmadığını bildiren bir Boolean saklar.
Metodlar: Response.clone(): yanıt nesnesinin klonunu oluşturur. Response.error(): bir ağ hatası olan bir yanıt nesnesi döndürür Response.redirect(): Yeni url ile bir yanıt nesnesi oluşturur Response Body uygular. Dolayısıyla, yukarıda tanımladığımız aynı İstek Gövdesi yöntemlerini de içerir.
Bu örnekte, ‘jsonplaceholder’ API’sından kukla veriler getiriyoruz. Bu açık bir API’dir ve test için kullanabilirsiniz.
“App”, bir anahtar “jsonData” ile bir “state” olan bir tepki bileşenidir. “render” yönteminde, “jsonData” tarafından tanımlanan değeri gösteren bir “Text” bileşeni döndürür. Bu değer “state” nesnesinden okunur. Varsayılan olarak “jsonData” değeri boştur. Veriler getirildiğinde, değeri “jsonData” olarak ayarlar ve bileşeni yeniden yükler.
Bu bileşen yüklendikten sonra componentDidMount yöntemi çağrılır. Bu yöntemin içinde, json API’sına bir GET isteği göndermek için “fetch” i kullanıyoruz. Yanıt vaadini döndürür ve bu vaat nesnesini, o yanıttan “json” değerini almak için kullanıyoruz.
Son olarak, bu json değerinin gövdesi “jsonData” anahtarına ayarlanır. Durum değeri değiştirildikten sonra, bileşen kullanıcı arayüzünü yeniden oluşturur ve json değeri kullanıcı arayüzünde aşağıdaki gibi gösterilir:
Yukarıdaki örnekte görebileceğiniz gibi, json verisi getirilir ve kullanıcı arayüzünde gösterilir.
Aşağıdaki gibi getirirken async-await’i de kullanabiliriz:
async function getJsonData() {
try {
let res = await fetch(
'https://facebook.github.io/react-native/movies.json',
);
let json = await res.json();
return json.data;
} catch (error) {
console.error(error);
}
}
Yukarıdaki fonksiyonlardan herhangi birini kullanabilirsiniz, tamamen uygulamanın mimarisine bağlıdır.
Not:
İOS uygulamaları için, bir istek SSL şifreli değilse, engellenir veya çalışmaz. Bu varsayılan davranıştır. Bir ATS veya uygulama taşıma güvenliği istisnası ekleyerek bundan kaçınabilirsiniz.
Makale, herhangi bir üçüncü taraf API, React Native Application’daki Rest Services’i entegre etmenin ne kadar kolay olduğunu gösterdi.
Lütfen bir deneyin ve yorumlarınızı bize bildirin.
“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 4. kısmıdır. Bir önceki makalede (Part 3), React Native’de Stillendirme ve Flex kullanımını örnekleyerek, elementleri boyutlandırma, renklendirme vb. değişiklikler yaparak nasıl özelleştireceğimizi anlattım.
Bu makalede, React Native ‘in en temel yapı taşı olan UI Components (Kullanıcı Arayüzü Bileşenleri) ‘ni anlatacağım. Component dediğimiz şey Türkçe’ye çevirdiğimizde bileşen anlamına geliyor. Sizin uygulamalarınızda işi yerine getiren, yapan her birime birer komponent denir aslında. Amaç bir kere yazalım o komponent’i her yerde kullanalım mantığı vardır. Bir React Native projesinde farklı tipteki UI öğelerini kullanabiliriz. Ancak bir android ve iPhone’da farklı görünebileceğini unutmayın. Text inputs, touchables ve picker’ların farklı örneklerle nasıl yapıldığını öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.
Text Inputs:
TextInput bileşeni, kullanıcı metin girişlerini almak için kullanılır. Metin girişleriyle kullanılabilecek aksesuarlar aşağıdadır:
placeholder : Bu placeholder metnidir, yani boş bir TextInput’ta gösterilecek metindir.
value: TextInput onChangeText içine yerleştirilecek değer: Bir işlev alır ve bu her metin değişikliğinde çağrılacaktır.
onSubmitEditing: Bir işlev alır ve metin gönderildikten sonra çağrılacaktır.
TextInput öğesine herhangi bir metin yazarsanız, metin içinde aynı metni gösterir. “placeholder” desteği yer tutucuyu koymak için kullanılır. Kullanıcı yazmaya başladığında bu kaldırılır. OnChangeText props bir işlevi alır ve geçerli ‘props‘ metin ’değerini değiştirir. “value” props, metni TextInput öğesine koymak için kullanılır. ‘TextInput’un‘ değerini ’doğrudan değiştirmiyoruz. “state” deki “metin” değerini değiştirir ve “metin” değer olarak atanır. Alttaki “Metin”, kullanıcının yazdığı metnin aynısını koymak için kullanılır.
TextInput’ta özelleştirme için başka birçok sahne var. Bu resmi kılavuzu kontrol ederek daha fazla bilgi edinebilirsiniz.
Touch Handling:
Tüm mobil uygulamalar esas olarak parmak dokunuşu kullanılarak işlenir. Bu dokunma hareketleri, dokunma, kaydırma, kıstırma vb. gibi farklı tiplerde olabilir. React Native, farklı hareketleri işlemek için bir hareket yanıtlama sistemi sağlar. Hemen hemen tüm React Native bileşeni kullanıcı parmak dokunuşunu algılayabilir, ancak yalnızca dokunma olayıyla ilgili olan bir bileşene “Touchables” adı verilir. Bu bileşeni kullanarak, farklı tasarıma sahip kendi özel düğmelerimizi oluşturabiliriz. Ayrıca, tek basış ve uzun basış olaylarını tespit etmek için iki farklı props sunar. Sağlayabileceği geri bildirim türleri şunlardır:
TouchableHighlight :
Bu, bir button veya web bağlantısı ile kullanılabilir. Kullanıcı öğeye bastığında görünüm kararır.
TouchableNativeFeedback :
Bu Android’de dalgalanma etkisi gösterecektir. TouchableNativeFeedback, iOS’ta desteklenmez.
TouchableOpacity :
Bu, kullanıcı bastığında buttonun opaklığını azaltır.
TouchableWithoutFeedback :
Dokunulduğunda kullanıcıya herhangi bir geri bildirim göstermek istemiyorsanız kullanın.
Bu türler dışında, tek basış ve uzun basışları tespit etmek için ‘onPress’ ve ‘onLongPress’ aksesuarlarını kullanabiliriz. Bu iki sahne de bir ‘function’ gerektirir.
Burada da görebileceğiniz gibi, TouchableHighlight bileşenindeki tek basış ve uzun basışları tespit etmek için ‘onPress’ ve ‘onLongPress’ desteklerini kullanıyoruz.
Picker:
Picker, kullanıcıdan bir değer listesinden seçim yapmasını istemek için kullanılır. Picker bileşen hem Android hem de iOS’ta kullanılabilir. İşlevsellik hem Android hem de iOS’ta aynıdır, ancak görünüm farklıdır. Aslında yerel Android ve iOS seçicileri kullanıyor ve her ikisi de farklı görünüyor. Seçilen değeri gösterir ve üzerine tıkladığımızda, android’de bir açılır pencerede mevcut değerlerin bir listesini gösterir. İOS’ta, mevcut tüm seçeneklerle birlikte bir kaydırılabilir tekerlek gösterir. Seçici bileşenini, diğer bileşenler gibi ‘react-native’ öğesinden içe aktarabiliriz. Örneğin :
import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class MainComponent extends Component {
state = {day: ''}
changePickerValue = (d) => {
this.setState({ day: d })
alert(`selected ${d}`)
}
render() {
return (
<View style={{paddingTop: 100}}>
<Picker selectedValue = {this.state.day} onValueChange={(value, index) =>
this.changePickerValue(value)
}>
<Picker.Item label = "Sun" value = "Sun" />
<Picker.Item label = "Mon" value = "Mon" />
<Picker.Item label = "Tues" value = "Tues" />
<Picker.Item label = "Wed" value = "Wed" />
<Picker.Item label = "Thurs" value = "Thurs" />
<Picker.Item label = "Fri" value = "Fri" />
<Picker.Item label = "Sat" value = "Sat" />
</Picker>
</View>
)
}
}
export default MainComponent
Bu kodu çalıştırırsanız, bir Android telefonda aşağıdaki gibi görünecektir:
Picker listesinde gösterilecek ‘Picker’ bileşeninin içine ‘Picker’ öğesi olarak bir öğe listesi eklememiz gerekir. Picker’da çok sayıda farklı props vardır. Bunlardan birkaçı aşağıdaki gibidir:
1. onValueChange :
Seçiciden bir öğe seçildiğinde bir geri arama verir. Seçilen öğenin değerini ve o öğenin dizinini verir. Dizin önemlidir, gerekirse dizini kullanarak farklı bir harita listesinden seçim yapabiliriz.
2. selectedValue :
Seçici öğe değerleri listelerinden biriyle eşleşmesi gereken seçilen değer.
3. enabled :
Değeri ‘false’ olarak ayarlarsak seçiciyi devre dışı bırakır.
4. mode :
Bu seçenek yalnızca Android için kullanılabilir. “dialog” veya “dropdown” olabilir. “dialog” kalıcı bir iletişim kutusu gösterir, bu varsayılan seçenektir. “dropdown” bir açılır liste görüntüler.
5. style and itemstyle :
stil “pickerStyleType” türünde olmalıdır. “picker” ye bir “style” eklemek için kullanılır. “itemStyle”, öğe etiketlerinin her birine stil uygulamak için kullanılır.
Şimdiye kadar, çoğu uygulama için gereken en yaygın kullanılan React Native UI Bileşenlerini gördük. Lütfen görüşlerinizi ve bununla ilgili sorularınızı bize bildirin.
“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 3. kısmıdır. Bir önceki makalede (Part 2), React Native ile cross-platform mobil uygulama geliştirmek için bilmeniz gereken State ve Props kavramlarından bahsettim.
Bu makalede, React Native’de Stillendirme ve Flex kullanımını örnekleyerek, elementleri boyutlandırma, renklendirme vb. değişiklikler yaparak nasıl özelleştireceğimizi anlatacağım.
Stil, uygulama geliştirmenin önemli parçalarından biridir. Native Android Uygulama geliştirme için XML, kullanıcı arayüzünü tasarlamak için kullanılır. Benzer şekilde, Native iOS Uygulama geliştirme için XCode gereklidir. Ancak React Native’de, hem Android hem de iOS’ta çalışan uygulamayı biçimlendirmek için yalnızca JavaScript kullanıyoruz. Reaksiyona özgü UI bileşenlerinin yerleşimini belirtmek için flexbox kullanılır. Bu makalede, React Native’de stil eklemeyi ve flexbox’ı nasıl kullanacağımızı öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın
Biçimlendirme:
React Native’de stil için CSS’yi kullanamayız. Bunun yerine, stil öğeleri eklemek için JavaScript kullanılır. Her kullanıcı arabirimi öğesi, kendisine uygulanan bir stil ‘props’ alır. CSS’den farklı olarak, adlandırma kuralı camel case (büyük küçük harf) kullanır, örn. bir öğenin arka plan rengini eklemek için “arka plan rengi” yerine “backgroundColor” kullanacağız.
Örneğin, aşağıdaki gibi bir kalın metin oluşturabiliriz:
<Text style={{fontWeight: 'bold'}}>Hello</Text>
Her bileşen farklı türde stil props alır. Geçersiz bir stil’den geçersek yok sayılır.
Stylesheet Kullanma:
Her UI bileşeni için stil props’u eklenmesi, kodu düzenlenmemiş ve dağınık hale getirecektir. Ayrıca, bu şekilde, stili birden fazla kullanıcı arayüzü öğesiyle paylaşamayız. React-Native, farklı kullanıcı arayüzü öğeleri arasında paylaşılabilen bir ortak stil deseni oluşturmak için başka bir yol sağlar. Ortak bir stil sayfası oluşturmak için aşağıda gösterildiği gibi StyleSheet.create yöntemini kullanın:
import React, Component } from 'react';
import StyleSheet, Text, View, Button from react-native
const styles= StyleSheet.create({
title: {
color: blue'
fontWeight:
fontSize: 30,
},
description: {
color: "#841584"
},
});
export default class StyleClass extends Component
render()
return (
<V1ew>
<Text style={styles.title}>This is a heading</Text>
<Text style={styles.description}> This 1s a description with different style</Text>
</View>
);
}
}
Bu örnekte, ‘Metin’ öğeleri içeren ‘StyleClass’ adlı bir bileşenimiz var. Her iki “Text” öğesi iki farklı stil kullanıyor. ‘StyleSheet.create’ öğesini kullanarak bileşeni dışa aktarmadan önce stili tanımlıyoruz. İki farklı stilin oluşturulduğunu görebilirsiniz: “title” ve “description” ve bu stilleri eklemek için “{styles.stylename}” kullanıyoruz. Bu yaklaşımın ana avantajı, kodun daha temiz hale gelmesi ve birden fazla UI bileşeninde bir stil kullanabilmemizdir.
Sabit boyut için yükseklik ve genişlik ekleme:
React-native’de, bir UI öğesi için sabit genişlik ve yükseklik ekleyebiliriz. Sabit yükseklik / genişlik ayarlarsak, tüm boyutlu cihazlar için aynı boyutta oluşturulurlar. ‘Stil’ bölümünde ‘genişlik’ ve yüksekliği aşağıdaki gibi kullanabilirsiniz:
Bu boyutlar birimsizdir ve yoğunluktan bağımsız pikselleri temsil eder.
Ancak bu iyi bir uygulama değildir, çünkü bir görünümün veya başka bir UI öğesinin ekranın yarısını doldurmasını istiyorsak ve sabit boyut kullanırsak, telefonlar ve tabletler gibi farklı cihazlarda farklı olacaktır. Bunun için “flexbox” adı verilen başka bir mekanizma kullanılır. Nasıl çalıştığını kontrol edelim:
Flexbox :
Flex, bir görünüme dinamik boyut vermek için kullanılır. Flex değerine 1 verirseniz, tam ekran alanı kaplar. Ebeveyn görüşüne ‘flex = 1’ verebilir ve alt görüşlerine farklı esnek değerler verebiliriz. Örnek,
Gördüğünüz gibi iç görünümler eşit olarak bölünmüş durumda. İç görünümlere aynı değerde farklı bir değer verirsek, aynı çıktıyı üretecektir. Daha büyük bükülme değeri kardeşlerine göre daha yüksek boşluk oranı sağlayacaktır. Bir görünümün 0’dan büyük bir değere sahip esnekliğe sahip olması veya sabit bir yükseklik / genişliğe sahip olması gerektiğini, aksi takdirde alt görünümlerin görünmeyeceğini unutmayın. Flexbox, farklı ekranlarda tutarlı düzen boyutu sağlamak için kullanılır.
Flexbox’ın ana kavramları şunlardır:
flexDirection
alignItems
justifyContent
flexDirection:
flexDirection, child görünümlerinin hangi yönde yerleştirileceğini tanımlamak için kullanılır. Ana flexDirection türleri şunlardır:
row: Tüm öğeleri soldan sağa hizalayın.
column: Tüm öğeleri yukarıdan aşağıya hizalayın. Bu varsayılan değerdir.
row-reverse : Satırın tersi. Tüm öğeleri sağdan sola hizala
column-reverse i: Sütunun tersi. Tüm öğeleri aşağıdan yukarıya hizalayın.
Bu, öğeleri çapraz eksen boyunca hizalamak için kullanılır. Ana ekseni hizalamak için justifyContent kullanılabilir. Öğeleri çapraz eksen boyunca hizalar. Türleri şunlardır:
stretch: childi çapraz eksenin yüksekliğine uyacak şekilde uzatın.
Burada görebileceğiniz gibi, son görünüm sağa yerleştirilir, çünkü ikinci görünümün altına yerleştirirsek ekranı geçecektir.
‘FlexWrap’i kullanarak sarmaladıysanız, öğeleri hizalamak için alignContent kullanabilirsiniz. 6 değeri vardır: ‘flex-start’, ‘flex-end’, ‘stretch’, ‘center’, ‘space-between’, ‘space-around’.
Flexbox kavramı CSS’deki ile aynıdır. Tek fark, flexDirection’ın varsayılan olarak “column” olmasıdır ve flex parametreleri yalnızca tek bir sayıyı destekler.
Sonuç:
Makale, React Native App’te Styling’i nasıl gerçekleştirebileceğiniz konusunda kısa bir giriş yapmıştır. Makaleyi herhangi bir noktayı içerecek şekilde güncellememiz gerekiyorsa lütfen okuyun ve bize bildirin.
“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 2. kısmıdır. Bir önceki makalede (Part 1), React Native ile cross-platform mobil uygulama geliştirmek için bilmeniz gereken program kurulumlarından ve Android ve IOS platformları için yapılması gereken ortam kurulum ve ayarlarından bahsettim.
Bu makalede de props” ve “state” kavramlarından bahsedeceğim. React Native’de veri komponent içinde 2 şekilde işlenir: State ya da props kullanarak. State, bir verinin değiştirilme/güncellenme durumu varsa kullanılabilir. Props ise, mevcut bir verinin başka bir komponente aktarılma yöntemidir.
Makaleleri sırasıyla okumanızı tavsiye ediyorum. Eğer PART 1’i okumadıysanız buradan ulaşabilirsiniz.
“props” ve “state”, React Native’deki iki önemli kavramdır. React Native Props ve State kullanarak, bir bileşeni kontrol edebiliriz. Bu derste, “props” ve “state” in örneklerle nasıl kullanılacağını öğreneceğiz.
Props
React Native’de, yeniden kullanılabilir her eleman bir bileşen olarak oluşturulabilir. Örneğin, bir resim ve başlık içeren bir feed listeniz varsa, o öğe için bir bileşen oluşturabilir ve bu öğeyi feed’in her satırında kullanabiliriz. Her satır farklı görüntü ve başlıklarla aynı bileşeni kullanacaktır.
Yine, uygulamamızda, başka bir sayfada resim ve başlık ile aynı görünüm gerekiyorsa, bu bileşeni kullanabiliriz.
Ancak bileşenin yükleyeceği değerleri nasıl ileteceğiz? Bu örnekte, her bir satır için aynı bileşene farklı bir resim URL’si ve başlığı geçirmemiz gerekiyor. “props” bunun için kullanılır. ReactJS’lere aşina iseniz, props konsepti aynıdır. Farklı bileşen örneğine farklı “props” atayabiliriz ve her örnek, görüşlerini oluşturmak için “props” değerini kullanır.
“props”, “properties” anlamına gelir. Normalde, bir üst bileşen props’u alt bileşenlerine geçirir. Alt bileşen, props’ta tanımlanan değerleri kullanır. Propsları kullanarak, yeniden kullanılabilir kod yazmak kolaylaşır.
Bileşenlerde props kullanımı:
Çoğu sistem bileşeninde props kullanmamız gerekir, çünkü bu bileşenler farklı özellikler için farklı görünecektir. Örneğin, yerel bir uygulamada bir resim eklemek için aşağıdaki “Resim” bileşeni gereklidir:
Burada ‘source’ bir props. Farklı URL’yi geçebiliriz ve farklı resimler gösterecektir. Aynı “Image” bileşenini kullandığımızı, ancak “url” desteklerinin farklı olduğunu unutmayın.
“Props” nin değişmez olduğunu hatırlamamız gereken bir şey var, yani onları değiştiremeyiz. Ayrıca, propslar üst bileşenden alt bileşene, yani yukarıdan aşağıya doğru geçirilir.
Custom Component oluşturma:
Bir ‘props’u kabul eden özel bir bileşen oluşturalım. Tek bir basit bileşen oluşturacağız ve farklı sahne değerleri kullanarak farklı değerler göstereceğiz.
Her şeyden önce, basit bir react-native projesi oluşturun. Kök klasörde bir “CustomCard.js” dosyası oluşturun ve aşağıdaki kodu ekleyin:
Bu bir react bileşenidir. Diğer görünüm bileşenleri gibi içe aktarabilir ve yükleyebiliriz. Bu bileşen yüklendiğinde, kullanıldığı yerden döndürülecek bir görünüm döndüren render() yöntemini yürütür.
View olarak return içinde, bir Metin ve bir Resim var. Metin, “props” lardan aldığı “başlık” değerini gösteriyor. Benzer şekilde, Resim aynı “props” lardan aldığı “url” yi kullanarak bir resim yükler.
Şimdi ‘App.js’ dosyasını açın ve içeriğini aşağıdaki gibi değiştirin:
Burada, ‘firstImage’ ve ‘secondImage’ iki farklı görüntünün iki farklı url’si. Kök bileşendir, yani Uygulama bu bileşenin oluşturma yönteminden döndürülen içeriği yükler.
“Render” içinde “CustomCard” bileşenlerini iki kez kullanıyoruz. Her seferinde iki değer iletiyoruz: “url” ve “başlık”. Bu değerler bileşende sırasıyla “this.props.url” ve “this.props.title” olarak kullanılır. Uygulamayı çalıştırın ve aşağıdaki gibi bir çıktı verecektir:
Burada gördüğünüz gibi, aynı bileşen farklı görüntü ve metinlerle yüklendi.
State
Daha önce “props” öğesinin ana bileşen tarafından ayarlandığından ve bir alt bileşene aktarıldığından bahsetmiştim. Alt bileşen, “props” daki değerleri değiştiremez. Değişebilir verileri işlemek için “state” adı verilen farklı bir bileşen özelliği kullanmamız gerekir.
Bir “state”, bir bileşende değişebilecek verileri depolamak için kullanılır. Her bileşenin farklı bir “state” değerleri vardır. Bu değerlere dayanarak kullanıcı arayüzü değiştirilir.
Daha önemli bir şey de, bir state’deki hiçbir değeri doğrudan değiştiremeyeceğimizdir. Bunun için “setState” adlı bir yöntemi çağırmamız gerekiyor. Bu yöntem geçerli durumu değiştirir ve tüm bileşeni yeniden oluşturur.
Yukarıda açıklanan aynı örneği kullanıyoruz. CustomCard.js dosyasını aşağıdaki gibi değiştirin:
Çıktı
Programı şimdi çalıştırırsanız, aşağıdaki gibi görünecektir:
Bileşenin altına bir düğme ekledik. Bu düğmelerden herhangi birini tıklatırsanız, her tıklamada başlık metnini gizler ve gösterir.
Koda yakından bakın. “constructor” yöntemi, bileşen her oluşturulduğunda, yani “render” çağrılmadan önce çağrılır. “constructor” içinde “state” i başlatıyoruz. Yalnızca bir boolean değeri ‘isHidden’ ve başlangıç değeri ‘false’.
“constructor” yönteminin “render” ifadesinde, “Metin” bileşeni yalnızca “eyalet” te tanımlanan “isHidden” değeri “yanlış” ise gösterilir. Aksi takdirde, gizlenir. Bir “state’te” mevcut değeri kontrol etmek için “this.state” kullanıyoruz.
‘Düğme’ bileşeninde, üzerine tıklarsak, ‘onPress’ desteklerinin işaret ettiği yöntemi, yani ‘showHideText’ ok işlevini uygular. Düğmeye her tıkladığınızda, aynı yöntemi çağıracaktır. Bu yöntemin içinde, ‘state’ tanımlı ‘isHidden’ ın mevcut değerini değiştiriyoruz.
this.setState ({isHidden:! this.state.isHidden})
Bunu “! This.state.isHidden” olarak değiştiriyoruz, yani, değer “doğru” ise “yanlış” ve “yanlış” ise, “doğru” olacaktır. Bir “state” içindeki herhangi bir şeyi değiştirmek için “this.setState” yöntemi çağrılır. Bu yöntemi çağırdığımızda, bileşen yeniden yeniden oluşturulur. Dolayısıyla, “isHidden” değeri “doğru” olursa, “Metin” gizlenir ve “yanlış” olursa “Metin” gösterilir.
Bir state’deki hiçbir değeri doğrudan değiştiremeyiz. Bunu değiştirmek için “setState” yöntemi gerekir. Bu yöntemi kullanarak bir veya daha fazla durum değerini değiştirebiliriz. Ayrıca, durum her bileşen nesnesinde farklıdır.
React Native Props ve State arasındaki fark:
React Native props ve state başlıkları arasındaki temel fark şunlardır:
Props değiştirilemez ancak state değiştirilebilir.
Props donanımı normalde ana bileşenden alt bileşenine geçirilir. Ancak, her bileşende state korunur.
Props araçlarını kullanarak bir üst bileşenin durumunu değiştirebiliriz.
Bir sonra ki makale de Part3:React Native Uygulamalarında stillendirmeden bahsedeceğim. Takipte kalın!
React Native için kısaca Facebook tarafından üretilen, cross-platform mobil uygulama geliştirme imkanı sağlayan bir framework olarak tanımlanmaktadır.
Mobil geliştirmede yeniyseniz, başlamak için en kolay yol Expo CLI’dir. Expo, React Native etrafında inşa edilmiş bir dizi araçtır ve birçok özelliğe sahip olmasına rağmen, şu anda bizim için en alakalı özellik, birkaç dakika içinde React Native uygulaması yazmanızı sağlayabilmesidir. Yalnızca Node.js’nin son sürümüne ve bir telefona veya emülatöre ihtiyacınız olacak. Herhangi bir araç yüklemeden önce React Native’ı doğrudan web tarayıcınızda denemek isterseniz Snack’i deneyebilirsiniz.
Mobil geliştirmeyi zaten biliyorsanız, React Native CLI’yi kullanmak isteyebilirsiniz. Başlamak için Xcode veya Android Studio gerekir. Bu araçlardan birini zaten yüklediyseniz, birkaç dakika içinde çalışmaya başlayabilirsiniz. Yüklü değilse, bunları kurmak ve yapılandırmak için yaklaşık bir saat harcamayı beklemelisiniz.
Öncelikle React Native ile ReactJS arasındaki farkları inceleyelim.
React Native, mobil uygulamalar oluşturmak için kullanılır, ancak ReactJS, bir web tarayıcısında çalışan web uygulamaları oluşturmak için kullanılır.
ReactJS’de bootstrap gibi CSS çerçevelerini kullanabilirsiniz, ancak React Native’de hiçbir CSS çerçevesini kullanamazsınız.
Animasyon eklemek için ReactJS’de CSS animasyonu kullanabilirsiniz, ancak React Native’de kendi API’sını kullanmanız gerekir.
React Native uygulamalarını test etmek için gerçek bir android veya iOS cihazına ihtiyacınız varken, ReactJS’de, test etmek için bir tarayıcıya ihtiyacınız vardır.
Kurulum:
React Native uygulamaları geliştirmenin iki farklı yolu vardır.
Bunlardan birincisi Expo Aracını Kullanmak, ikincisi de React Native CLI kullanmaktır.
Expo kullanma:
Expo’yu kullanarak, Android Studio veya XCode gibi diğer geliştirme araçlarını yüklemeden bir projeye hızlı bir şekilde başlayabilirsiniz. Native mobil uygulama geliştirme hakkında hiçbir şey bilmiyorsanız, başlamak için en kolay yol budur.
Expo, NodeJ’lere bağımlıdır, bu nedenle expo’yu denemek için sisteminizde Node.js 10+ yüklü olmalıdır. Yoksa, önce Node.js web sitesinden yüklediğinizden emin olun.
Expo kurulumu npm ile yapılır. Bir terminal açın ve kurmak için aşağıdaki komutu çalıştırın:
npm install -g expo-cli
Expo CLI komut satırı yardımcı programını sisteminize global olarak yükleyecektir. Şimdi projenizi oluşturmak istediğiniz bir klasöre gidin ve aşağıdaki komutu yazın:
expo init MyFirstProject
“MyFirstProject” klasöründe yeni bir ReactNative expo projesi oluşturacak. Şimdi, react native sunucusunu başlatmak için aşağıdaki komutu kullanın:
npm start
veya
expo start
Bir geliştirme sunucusu başlatacaktır.
Uygulamayı iPhone veya Android cihazınızda çalıştırmak için expo istemci uygulamasını indirmeniz gerekir. Bu uygulamayı Android / iPhone’unuza indirin ve expo talimatlarını izleyin. Expo, bir Android veya iPhone’da çalıştırmak için tarayıcınızda farklı seçeneklerle yeni bir sekme açacaktır. Hem geliştirme sunucunuzun hem de telefonunuzun aynı wifi ağında olması gerektiğini unutmayın.
Varsayılan projedeki herhangi bir kodu değiştirmek için, favori kod düzenleyicinizde klasörü açın. Main kod App.js dosyasında olacaktır. Bu dosyadaki her şeyi değiştirin ve kaydedin, proje telefonunuza otomatik olarak yeniden yüklenir.
React Native CLI kullanma:
React Native CLI’yi kullanarak hem Android hem de iOS için yerel kod tabanı oluşturabilirsiniz. Uygulamayı hem iOS hem de Android’de test etmek istiyorsanız bir Mac’e ihtiyacınız var. Ayrıca, kurulum farklı işletim sistemleri için farklıdır. Bu makalede, hem Android hem de iOS’u kapsayacak şekilde Mac’e nasıl yükleneceğini göstereceğim.
IOS için hazırlıklar:
Bir uygulamayı bir iOS simülatöründe veya gerçek bir iPhone’da çalıştırabilirsiniz. Ancak ihtiyacınız olan ilk şey XCode ve XCode komut satırı araçlarıdır.
Her şeyden önce, Mac App Store’u açın, XCode’u arayın ve yükleyin. Ayrıca, farklı iPhone’lar için iOS simülatörleri ve iOS uygulamaları oluşturmak için diğer araçlar yükleyecektir. Zaten XCode yüklüyse, 9.4 veya daha yeni bir sürüme güncelleyin.
İkincisi, XCode komut satırı araçlarına ihtiyacınız var. XCode Preferences (Tercihleri) açın ve Locations (Yerler) sekmesi altında en son komut satırı araçlarını yükleyin. Bu kadar.
Android için hazırlıklar:
Android kurulumu iOS’tan farklı. Yapmamız gereken ilk şey Android Studio’yu yüklemek. Resmi web sitesinden indirin ve yükleyici dosyasını kullanarak yükleyin. Lütfen kurulum sırasında aşağıdaki öğeleri kontrol ettiğinizden emin olun:
Android Studio ile en son SDK sürümünü alacaksınız. Daha sonra, güncellemek isterseniz “configure -> SDK manager” dan yapabilirsiniz.
Sistem düzeyinde bir son ortam değişkeni yapılandırması daha gereklidir. $HOME/.bash_profile veya $HOME/.bashrc yapılandırma dosyanızı açın ve aşağıdaki satırları ekleyin:
Node 8.3 veya daha yeni bir sürüm ve JDK 8 veya daha yeni bir sürüm gereklidir. Watchman, dosya sistemindeki değişiklikleri izlemek için kullanılır.
Tüm bu kurulumlar yapıldıktan sonra, aşağıdaki komutu kullanarak reat-native CLI yüklemeniz gerekir:
npm install -g react-native-cli
Yeni bir proje oluşturun:
Yeni bir proje oluşturmak daha kolaydır. Bir terminal açın ve aşağıdaki komutu çalıştırın:
react-native init MyProject
Yeni bir proje ‘Projem’ yaratacak. Gerçek bir cihazda veya bir emülatörde çalıştırabilirsiniz. Kurulumun nasıl yapılacağını öğrenmek için bu kılavuzu izleyin.
Bir Android veya iOS uygulamasını test etmenin başka bir yolu var. Uygulama bir emülatör veya simülatörde çalıştırılabilir. IOS simülatörleri XCode ile otomatik olarak indirilir, ancak android için Android Studio’yu açın ve sanal bir cihaz veya taklitçi eklemek için ‘AVD Manager’ simgesini tıklayın. Ekleyip sonraki adımlara geçmeden önce çalıştırın.
Bir proje yürütmek:
Bir proje yürütmek kolaydır. Aşağıdaki komutları kullanın:
