React native nedir sorusuna cevap bulacağımız ve react native uygulama geliştiricilerine kılavuz niteliğinde olacak bu makalede en sık kullanılan temel işlemler ve ihtiyacınız olan bazı temel bilgilere yer verdim. Makaleyi sürekli güncel tutacağımı bilmenizi isterim. React native geliştirmesine devam ettiğiniz sürece arada uğramanızı ve makalenin güncelliğini kontrol etmenizi öneririm.

İçerik göster

React Native Nedir? Ortam Nasıl Kurulur?

React Native Nedir

Ortamın Ayağa Kaldırılması

Bu başlığın detayına girmeden önce ortam ayağa kaldırma ile uğraşamam diyorsanız yada local admin gibi sorunlarınız varsa expo üzerinden geliştirmelerinizi yapabilirsiniz. Expo online react-native geliştirme ortamı sağlamaktadır ve kodlarınızın çıktısını anlık olarak android ve ios platformlarından görebilirsiniz. Hatta kendi cihazınıza Expo uygulamasını kurup online ide üzerinde ki react-native kodlarınızın anlık çıktısını kendi cihazınız üzerinden görebilirsiniz. Expo üzerinde ki bir örneğimi bu makale’ye yetleştirdim. Örneğe gözatmak ve expo’yu keşfetmek için iOS Versiyonunu Öğrenme başlığı altında yerleştirilmiş olan expo örneğini görebilirsiniz.

React native ile ilgili gerekli olan araçların sisteminizde otomatik olarak kontrol edilip size bir rapor sunulmasını istiyorsanız npx @react-native-community/cli doctor komutunu çalıştırabilirsiniz.

React native projenini oluşturmak için alttaki komutu komut satırından çalıştırarak sisteminize global olarak react native cli aracını kurmuş olursunuz. React native projesini oluşturma, cihazda gösterme ve diğer react native işlemlerinin tümünü bu tool üzerinden gerçekleştireceğiz, o yüzden makalenin devamındaki kodları test edebilmek için kurmalısınız.

NPM ile yükleyebilirsiniz.

npm install -g @react-native-community/cli

Npm(Node Package Manager) eğer ortam değişkenlerine ekli değilse yada NodeJS sisteminizde hiç kurulu değilse öncelikle NodeJS’i sisteminize kurmalısınız. NodeJS kurulum dosyası ve yönlendirmeler için https://nodejs.org/en/ adresinden faydalanabilirsiniz.

yada Yarn ile yükleyebilirsiniz.

yarn global add @react-native-community/cli

Proje oluşturmak için create-react-native-app v.b. npm paketleride mevcut. Bazı makaleler ve videolarda bu uygulama oluşturma süreçleri bu paketler üzerinden yapılıyor bu paketler official olmadığından güncel olmayabilir ve proje geliştirmede eksik bazı durumlardan patlayabilir. Canınızı sıkabilir tecrübe ile sabittir 🙂

@react-native-community/cli aracını kurduktan sonra yeni bir react native uygulaması oluşturmak için alttaki komutu komut satırından oluşturmak istediğiniz dizindeyken çalıştırın.

react-native init Todo

101 makalelerinin vazgeçilmezi Todo uygulaması yaparak react-native’i anlamaya çalışacağız.

Bazen yeni react-native uygulaması oluşturmak istediğinizde yeni versiyonda bazı uygumsuzluklar yaşanabilmektedir. Bu yüzden eski react-native versiyonları ile projeyi oluşturmak için alttaki gibi –version parametresi kullanarak belirttiğiniz react-native versiyonu ile projenin oluşturulmasını sağlayabilirsiniz.

react-native init --version=”0.55.4″ Todo

Not: Yeni oluşturduğunuz react-native projesinin paket bağımlılıklarının kurulması için ilgili klasöre gidip npm install komutunu çalıştırmalısınız. Altta çalıştırmanız gereken kodları görebilirsiniz. Todo benim react-native init ... esnasında verdiğim proje adıdır eğer siz farklı bir isimde proje adı verdiyseniz cd Proje_Adi diyerek klasöre geçiş işlemi yapabilirsiniz.

cd Todo

npm install

Üstteki komut ile beraber alttaki görüntüde ki gibi bir sonuç ile karşılaşacaksınız(Versiyon değişikliğinden dolayı belki bazı ufak farklılıklar olabilir). android ve ios klasörleri eğer native tarafta geliştirme tecrübeniz yok ise çok nadir müdahale de bulunacağımız noktalardır.

React Native Started Project Structure

Eğer react-native geliştirmelerinizi Typescript ❤️ üzerinden yapmak istiyorsanız. react-native init komutuna ek olarak –template react-native-template-typescript@6.2.0 parametresini ekleyerek projenin Typescript template’i üzerinden inşa edilmesini ve gerekli konfigürasyonların otomatik olarak yapılmasını sağlayabilirsiniz.

Uygulamanın ilk ayağa kaldırıldığı dosya index.js dosyasıdır. Alttaki işaretli olan satır ile uygulama açılışında ilk render edilecek ekran’ın component’i parametre olarak geçilerek belirtilmektedir.

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

/**

* @format

import {AppRegistry} from 'react-native';

import App from './App';

import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js’in uygulama açılışında ekrana render edilen ilk component olduğunu söylemiştik. Hemen App.js içeriğine ve ardından uygulamadaki çıktısına gözatalım.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @format

* @flow

import React from 'react';

import {

SafeAreaView,

StyleSheet,

ScrollView,

View,

Text,

StatusBar,

} from 'react-native';

import {

Header,

LearnMoreLinks,

Colors,

DebugInstructions,

ReloadInstructions,

} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {

return (

<ScrollView

contentInsetAdjustmentBehavior="automatic"

style={styles.scrollView}>

{global.HermesInternal == null ? null : (

<Text style={styles.footer}>Engine: Hermes</Text>

</View>

)}

Edit <Text style={styles.highlight}>App.js</Text> to change this

screen and then come back to see your edits.

</Text>

</View>

<Text style={styles.sectionTitle}>See Your Changes</Text>

</Text>

</View>

<Text style={styles.sectionTitle}>Debug</Text>

</Text>

</View>

<Text style={styles.sectionTitle}>Learn More</Text>

Read the docs to discover what to do next:

</Text>

</View>

</View>

</ScrollView>

</SafeAreaView>

</>

);

};

const styles = StyleSheet.create({

scrollView: {

backgroundColor: Colors.lighter,

engine: {

position: 'absolute',

right: 0,

body: {

backgroundColor: Colors.white,

sectionContainer: {

marginTop: 32,

paddingHorizontal: 24,

sectionTitle: {

fontSize: 24,

fontWeight: '600',

color: Colors.black,

sectionDescription: {

marginTop: 8,

fontSize: 18,

fontWeight: '400',

color: Colors.dark,

highlight: {

fontWeight: '700',

footer: {

color: Colors.dark,

fontSize: 12,

fontWeight: '600',

padding: 4,

paddingRight: 12,

textAlign: 'right',

});

export default App;

Mobil Uygulamada ki Ekran Görüntüsü

React Native Init Project On Simulator

Uygulamanın cihaza nasıl yüklenildiğini öğrenmek için Cihaza Uygulama Yükleme kısmına gözatabilirsiniz.

Geliştirme Esnasında Kullanılabilecek Bazı İpuçları

Eğer sadece geliştirme safhasında iken çalıştırmanız gereken kodlar varsa __DEV__ global değişkenini kullanabiliriniz.

Eğer geliştirme yaparken sarı renkli uyarı kutucukları sizi sürekli rahatsız ediyor ve gizlemek istiyorsanız alttaki kodu uygun bir yere yazmanız ile bu sorun ortadan kalkacaktır.

Alttaki console.disableYellowBox kullanımı React Native 0.63 sürümü ile birlikte DEPRECATED yani kullanımdan kaldırıldı olarak işaretlenmiştir. Onun yerine LogBox sınıfını kullanmalısınız.

console.disableYellowBox = true; // Eski kullanım

LogBox.ignoreAllLogs() // 0.63 ve sonrası kullanılması gereken

console.disableYellowBox = true; // Eski kullanım

LogBox.ignoreAllLogs() // 0.63 ve sonrası kullanılması gereken

Tüm hataları gizlemektense belirli hataları yada uyarıları gizlemek için kullanabileceğiniz farklı yöntemler de mevcut. Bunlar şöyledir;

Warning: ile başlayan tüm uyarıların gösterilmemesini istiyorsanız alttaki gibi bir kod bloğu kullanmalısınız.

console.ignoredYellowBox = ['Warning:']; // Eski kullanım

LogBox.ignoreLogs(['Warning:']); // Yeni kullanım

console.ignoredYellowBox = ['Warning:']; // Eski kullanım

LogBox.ignoreLogs(['Warning:']); // Yeni kullanım

Dizi verilerini listelemek için sıklıkla .map fonksiyonunu kullanırız ve key attribute’ü ile unique bir değer vermezseniz konsol’dan sizlere bazı uyarılarda bulunulacaktır. Bu Each uyarılarını gözardı etmek için alttaki kod bloğunu kullanabilirsiniz.

console.ignoredYellowBox = ['Warning: Each']; // Eski kullanım

LogBox.ignoreLogs(['Warning: Each']); // Yeni kullanım

console.ignoredYellowBox = ['Warning: Each']; // Eski kullanım

LogBox.ignoreLogs(['Warning: Each']); // Yeni kullanım

Birden fazla kural belirterek uyarı ve hataları gözardı etmek için alttaki gibi bir kod bloğu kullanabilirsiniz.

console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed']; // Eski kullanım

LogBox.ignoreLogs(['Warning: Each', 'Warning: Failed']); // Yeni kullanım

console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed']; // Eski kullanım

LogBox.ignoreLogs(['Warning: Each', 'Warning: Failed']); // Yeni kullanım

Üstteki kod bloğunda her bir kuralı virgül ile ayırıp yazdığımızı görüyoruz ilk kuralımız üstte bahsetmiş olduğumuz döngülerimiz içerisinde key attribute’ünde unique bir değer tanımlamadığımızdan performans açısında sorun yaşayabileceğimizi bizlere belirten uyarıları gözardı etmemizi sağlıyordu diğer kural ise Failed ile başlayan tüm uyarıları gözardı ediyoruz.

Bu uyarıları gözardı etmek aslında sizin için bir dezavantaj olduğunu unutmayın. Eğer uyarılarda belirtilen durumları çözmezseniz programınız büyüdükçe bu uyarıların sebep olduğu performans yada diğer sorunlar büyüyerek ağır sonuçlara yol açabilir.

Platform Nesnesi Kullanımı

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.

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

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

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

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

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;

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.

Mobil İşletim Sistemi Versiyonlarını Öğrenme

Android Versiyonunu Öğrenme

import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

import {Platform} from 'react-native';

if (Platform.Version === 25) {

console.log('Running on Nougat!');

}

iOS Versiyonunu Öğrenme

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);

if (majorVersionIOS <= 9) {

console.log('Work around a change in behavior');

}

Platform nesnesini kullanmadan da platform spesifik component dosyalarını oluşturup kullanabilirsiniz bunun için .js extension’ından önce ios android diye belirtmelisiniz. Örnek olarak BigButton.ios.js ve BigButton.android.js dosyalarını oluşturup platform özelinden kodlar yazdığınızı varsayalım bunu herhangi bir dosyadan import etmek istediğinizde sadece BigButton diye belirmeniz yeterli geri kalan işi React Native otomatik olarak halletmektedir.

Üstteki tüm kodları Android ve iOS cihazında test edebilmek için alttaki aracı kullanabilirsiniz.

Cihaza Uygulama Yükleme

iOS

iOS emulator’de uygulamayı çalıştırmak için macos yüklü bir cihaza yada sanal disk’e kurulu hackintosh’a ihtiyacınız var. Eğer macos işletim sisteminiz varsa bu durumda cihazınızda NodeJS, ReactNative ve XCode yüklü olmalıdır. Bu araçlar da MacOS işletim sisteminizde yüklü ise o zaman alttaki komutu çalıştırarak emulator’de uygulamanız açılacaktır.

react-native run-ios

Eğer projeyi ilk defa oluşturduysanız yada Git, SVN v.b. repolardan projeyi çektiyseniz react-native run-ios demeden önce muhakkak ios klasörü altındayken pod install komutunu çalıştırmalısınız. Bu arada pod(CocoaPods) Swift ve Objective-C projeleri için paket yöneticisidir. Bu yüzden ios tarafındaki bağımlılıkları kurmak için pod install dememiz gerekiyor.

Üstteki kod’u çalıştıdığınızda default bir simulator ile uygulamayı çalıştıracaktır fakat sizin belirleyeceğiz bir simulator’de çalışmasını istiyorsanız o zaman alttaki gibi --simulator "Cihaz Adı" şeklinde parametreyi ekleyerek çalıştırmalısınız örnek olarak alttaki kod bloğunda iPhone 5s cihazında uygulamayı çalıştırabileceksiniz.

react-native run-ios --simulator “iPhone 5s”

Eğer gerçek bir iOS cihaza uygulamayı yüklemek isterseniz. --simulator parametresi yerine --device parametresi eklenerek gerçek bir cihaza yükleme yapılabilir. Eğer bir tane gerçek cihaz bağlı ise cihaz adı belirtmenize gerek yok ama birden fazla cihaz bağlı ise --device "Cihaz Adı" şkelinde giriş yapmalısınız.

react-native run-ios --device

Uygulamaya üstteki komut ile yükleme işlemi yaparsanız Debug modda yükleme işlemi gerçekleştirilir fakat Release modda kurulum işlemi gerçekleştirmek için alttaki komutu çalıştırmalısınız.

react-native run-ios --device --configuration Release

Android

Anroid emulator’de uygulamayı çalıştırmak için işletim sistemi zorunluluğu bulunmamaktadır. Windows, Linuxi MacOS işletim sistemlerinin herhangi birinden kolaylıkla emulatör’den uygulamayı çalıştırabilirsiniz emulator’lerinizi eğer Android Studio, Eclipse v.b. ide’lerden biri kurulu ise bu uygulamalar içerisinde yer alan AVD(Android Virtual Device) kısmından emulator’lerinizi yönetebilirsiniz. react-native run-ios dediğinizde eğer emulator açık değilse otomatik olarak varsayılan emulator çalıştırılmaktadır ama android tarafında bu durum mevcut değildir öncelikle AVD manager içerisinde emulator’ü çalıştırmalısınız sonrasında alttaki komut ile uygulamayı çalıştırabilirsiniz.

react-native run-android

Üstteki komut’u çalıştırdığınızda birden fazla android cihaz açık ise yada bir tane emulator ve bir tane’de gerçek cihaz bağlı ise o zaman hangi cihazdan çalıştırmak istediğinizi belirtmek için –device parametresini kullanmalısınız diye uyarı verecektir. Bu durumda alttaki –device DEVICE_ID kısmını ekleyerek ilgili cihazda uygulamayı çalıştırabilirsiniz.

react-native run-android --deviceId DEVICE_ID

Üstteki komut’da yer alan DEVICE_ID kısmında çalıştırmak istediğiniz gerçek cihazın id’si yada emulator’ün id’sini girmelisiniz eğer cihaz id’sinin ne olduğu konusunda bir fikriniz yok ise o zaman alttaki komut ile cihaz id’lerinin listelenmesini sağlayabilirsiniz.

adb devices

adb komutunun çalışabilmesi için Android SDK dizininizin Ortam değişkenlerinde yer aldığına emin olunuz. Hangi path’lerin ortam değişkenlerine ekleneceği konusunda fikriniz yoksa Android SDK Nedir ve Kurulumu Nasıl Yapılır? makalesine gözatmanızı öneririm.

Ayrıca gerçek cihazlarınız adb devices dediğinizde USB’den bağlı olmasına rağmen gözükmüyor ise Geliştrici seçenklerini açmamış olmalısınız. Geliştirici seçeneklerini açmak için ise Android Geliştirici Seçenekleri Nedir ve Nasıl Açılır? adlı makaleye gözatabilirsiniz.

Üstteki tüm komutlar uygulamanın DEBUG halinin ilgili cihaza kurulumunu gerçekleştirir. Eğer RELEASE halinin kurulmasını istiyorsanız --varian=release parametresini eklemelisiniz.

react-native run-android --variant=release

Markette ki Uygulama Detayına Url Scheme Kullanarak Yönlendirme

Uygulamalara yönlendirme işlemi yaparken url’den yada uygulamalara özel tanımlanmış bazı custom url şemaları kullanabiliyoruz. Örnek vermek gerekirse https://play.google.com/store/apps/details?id=com.muratoner.tabu linkine android bir mobil cihazdan tıkladığınızda size alternatif bir kaç uygulama olursa hangi uygulamadan açmak istediğinizi soracak yada Google Play Store’dan açmak isteyip istemediğiniz soracak yada direkt açacaktır. Aynı şekilde apple store linkine iOS cihazdan tıkladığınızda App Store’dan açmak isteyip istemediğinizi soracaktır.

Peki bu tür bir özelliği nerede kullanabilirsiniz?

Örnek vermek gerekirse uygulamanızdan sürekli güncelleme çıkıyorsunuz ve bazı güncellemeleri kullanıcıya zorunlu tutmak istiyorsunuz bu durumda kullanıcıya güncelleme işlemini yapması için Uygulama mağazalarına yönlendirme yapmanız gerekiyor bunlar Google Play Store ve App Store mağazalarıdır bunlara isterseniz direkt olarak url ile yönlendirme yapabilirsiniz üstte Google Play Store için örnek bir link paylaşmıştık ama önerilen yöntem Url Scheme’lardan yönlendirme yapmaktır peki hem iOS hem de android için kullanılacak url scheme’lar nelerdir?

Android: market://details?id=com.sabancidx.hrnext&hl=tr
iOS TestFlight: itms-beta://beta.itunes.apple.com/v1/app/1490076831?l=tr
iOS App Store: itms://itunes.apple.com/v1/app/1490076831?l=tr

Üstteki market:// şeması android tarafında Google Play Store mağazası için oluşturulmuş özel bir custom scheme’dır ve iOS tarafında göreceğiniz üzere 2 tane custome url scheme görüyorsunuz biri TestFlight dediğimiz uygulamayı canlıya çıkmadan önce test kullanıcıları ile buluşturduğunuz ortam diğer ise android tarafında olduğu gibi canlı olarak son kullanıcılar ile paylaştığınız ortamdır.

React Native’de Flexbox

React Native’de oluşturduğunuz tasarımlarınızın tüm cihazlarda düzgün şekilde gözükmesi için yani responsive bir tasarım elde etmek için flexbox konusuna çok iyi hakim olmak gerekiyor. O yüzden flexbox konusuna çok detaylı biçimde ele aldığımız Flexbox Nedir? Nasıl Kullanılır? makalesine muhakkak göz atmanızı öneririm.

Son olarak React native ile ilgili en son gelişmeleri kaçırmamak için https://facebook.github.io/react-native/blog/ adresini muhakkak sık sık ziyaret edin.

📚 React Native Nedir Sorusuna Cevap Bulabileceğiniz Benzer Makaleler

📚 React Native Nedir Sorunusuna Cevap Bulabileceğiniz Kaynaklar

https://facebook.github.io/react-native/docs/getting-started
https://facebook.github.io/react-native/blog/

✏️ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

React native nedir, 2020 react native nedir, en güncel react native kılavuzu, güncel react native kılavuzu, react native kılavuzu, React Native nedir

5/5 - (10 votes)

Eyup dedi ki:
3 Haziran 2022, 10:10
Sayın hocam çok faydalı bir makale idi. Size bir sorum olacaktı ve bu konuda çok fazla kaynak yok. Ben geliştirdiğim react-native uygulamasında ürün linklerine tıklandığında ilgili ürün sayfasına gitmesini istiyorum ancak browser ile değil benim uygulamamda açılmasını istiyorum. Bunun en basit ve en doğru yöntemi nedir acaba. Şimdiden teşekkürler
Yanıtla
- Murat ÖNER dedi ki:
  6 Haziran 2022, 12:26
  Merhaba,
  Bunun en doğru yöntemi şudur;
  Uygulama içerisinde açılmasını istiyorsanız ve kontrolün tamamen sizde olmasını istiyorsanız WebView kullanabilirsiniz.
  Uygulama içerisinde açılmasını istiyorsunuz fakat kontrolün tamamen sizde olmadığı ama özelleştirebildiğiniz bir yapı arıyorsanız InAppBrowser’a bakabilirsiniz.
  Yanıtla

Kategoriler

Bloga e-posta ile abone ol

React Native Nedir? Ortam Nasıl Kurulur?