Bu bölümde terminal üzerinden komutlarla oluşturduğumuz temel dosyalar üzerinedir.
package.json dosyası: Uygulama ismi, versiyonu, bağımlıkları ve geliştirme bağımlılıkları gibi bilgileri içerir. Burada kullanılan bağımlılığın versiyonu önemlidir. Eğer ileri de ek bir bağımlılığa ihtiyaç duyarsanız, buradan bağımlılığı belirtmeyi unutmayın. Örnek bir package.json dosyası:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{ "name": "nativecode", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.6.3", "react-native": "0.57.8" }, "devDependencies": { "babel-jest": "23.6.0", "jest": "23.6.0", "metro-react-native-babel-preset": "0.51.1", "react-test-renderer": "16.6.3" }, "jest": { "preset": "react-native" } } |
app.js dosyası: Programın emulator üzerinde görülen kısımlarının kodunu içeren dosyadır. Bu dosyanın ilk satırları ES6 import satırlarını içerir.
1 2 |
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View} from 'react-native'; |
Bir uygulama çalıştığı zaman node_modules klasöründen import edilen kısımları bulup React Native Packager’a sunar. Bir React bileşini yaratmak için ilk import satırı olmalıdır. Bu satırda React paketi içinden React ve Component alınan (export) değerlerdir. React geçerli alımdır. Süslü parantezler arasındaki alınan diğer değerler (Component gibi) alınır. İkinci satırda alınan tüm değerler React Native-spesifik değerlerdir. Şimdi kodumuzun diğer satırlarını kısaca açıklayalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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', }); type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={styles.welcome}>Merhaba React Native 3!</Text> <Text style={styles.instructions}>To get started, edit App.js</Text> <Text style={styles.instructions}>{instructions}</Text> </View> ); } } |
instructions değişkeni platforma göre yazılan bir değişkendir. Platformun IOS veya Android olmasına göre farklılıklar gösterir. Bu değişken App sınıfı içindeki {instructions} satırlarında çağrılır. App sınıfı tüm platformlarca kullanılan bir sınıftır. “export default” geçerli çalışma sınıfı olduğu anlamına gelir ve uygulama çalıştığında il bu sınıfa bakar. (Main gibi düşünebiliriz.) Bu sınıf Component özelliklerini miras alır ve boş bir Props değerine sahiptir. Burada render metodu oluşacak çıktıyı üretir. View ve Text React Native için özel component’ler (bileşenler)dir. En son bölüm style bilgilerini içerir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); |
Style bölümü isminden de anlaşılacağı gibi componentlerin style ve layout bilgilerini tutar. App sınıfı içinden “style={styles.welcome}” şeklinde component’in style değeri set edilebilir. Aslında web ortamında HTML ve CSS ilişkisine çok benzer bir ilişki mevcuttur.
İleri ki bölümlerde bu konular daha geniş şekilde işlenecektir.
index.js dosyası: Aslında bakılan ilk dosyadır ve app.js sınıfı bu dosya içinde sisteme eklenir. Sisteme eklemek için:
1 2 3 4 5 |
import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); |
AppRegistry, “react-native” içinde bir özelliktir. İkinci satırda App.js dosyası bağlanır. Üçüncü satırda app.json dosyasında name değeri çekilir. app.json dosyası:
1 2 3 4 |
{ "name": "nativecode", "displayName": "nativecode" } |
Buradaki name değerini aldık. AppRegistry içindeki registerComponent üzerinden proje ismi ve App dosyası register edilir. Burada, Bu metod içinde “(” silip eklediğinizde veya “,” silip eklediğinizde parantez arasına yazılacak değerler hakkında bilgi edinebilirsiniz. getComponentFunc: componentProvider bir fonksiyon türünden bilgi istemektedir. Bu yüzden “() => App” şeklinde bir tanım yapılmıştır. Bu tür özellikleri daha iyi anlamamız için üçüncü konu ES6 üzerinedir.