05.05.01. Platforma Özgü Kodlar

Çok platform bir uygulama oluştururken, platforma özgü kodlar yazmak zorunda kalabilirsiniz. Hatta, platforma özgü bileşenler ile görsel uygulamalar oluşturmak isteyebilirsiniz.

React Native, kodunuzu kolayca düzenlemek ve platforma göre ayırmak için iki yol sunar:

Platform modülü kullanma
Platforma özgü dosya uzantıları kullanma

Platform Modülü

React Native, uygulamanın çalıştığı platformu algılayan bir modül sağlar. Özellikle bir bileşenin yalnızca küçük parçaları platforma özgü olduğu zaman bu seçeneği kullanın. Bölüm 02.08. kodları hatırlayalım.

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

const instructions = Platform.select({

ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',

android:

'Double tap R on your keyboard to reload,\n' +

'Shake or press menu button for dev menu',

});

Burada instructions değişkeni platforma özgüdür. Platform.select ile ios ve android için string değerleri farklı olarak instructions değişkeni içine atanır. Benzer işlemi style içinde yapabilirsiniz. Örneğin,

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,

});

height değeri Platforma göre ayarlanır. Eğer ios ise 200 aksi taktirde 100 değeri atanır. Platform.select’te style işlemi için kullanılabilir. Örneğin,

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',

}),

});

Eğer ios ise arka plan rengi kırmızı, android ise arka plan rengi mavi atanır. Platform select bir bileşeni seçmek içinde kullanılabilir. Örneğin elimizde benzer işleri yapar, fakat platform bazlı iki bileşen olsun. Aşağıdaki kodla platforma özgü bileşeni seçebiliriz. Örneğin,

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

<Component />;

const Component = Platform.select({

ios: () => require('ComponentIOS'),

android: () => require('ComponentAndroid'),

})();

<Component />;

Platformların kendilerine özgü versiyonları olabilir. Bazı versiyonlar bazı bileşenleri desteklemeyebilir. Bu durumda yine çözüm mevcuttur. Platform versiyonuna özel çözüm üretebilirsiniz. iOS ve Android örnekleri:

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!');

}

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');

}

Platforma Özgü Dosya Uzantıları

Eğer platforma özgü kodlarınız birbirinden tamamen farklı ise farklı platforma ait kodlarınızı farklı dosyalara yazmanızı önerilir. Bu durumda .android veya .ios uzantılarını dosyaya eklemeniz yeterlidir. Örneğin bigbutton.js adında bir dosyamız olsun. Bu dosyayı platforma özgü yazmayı düşündük. Bu durumda:

BigButton.ios.js
BigButton.android.js

Başka bir js dosyasından bu dosyaları kullanmaya kalktığınızda React Native platforma göre uygun dosyayı seçer. Örneğin başka bir dosyadan bu dosyaları çağıralım:

const BigButton = require('./BigButton');

1	const BigButton = require('./BigButton');

Görüldüğü gibi platformu belirtmedik. Bu durumda platforma özgü dosya seçimi React Native tarafından yapılır. Eğer kodlarınızı bir React web uygulaması ile de çalıştırıyorsanız, BigButton.native.js dosyasına da web uygulamasına özel kodlarınızı yazabilirsiniz.