Şimdi sizin kafanızda iki soru var: React Native nedir ve neden kullanılır?

5
2144

React Native nedir? Bir Facebook ürünü. JavaScript ile native iOS uygulamaları geliştirebileceğiniz bir framework.

Aslında halihazırda çoğu developer PhoneGap sayesinde JavaScript ve HTML5 kullanarak iOS uygulamaları geliştirebiliyor. Peki React Native gerçekten bu kadar önemli mi?

Cevap: evetönemli ve insanların bu kadar heyecanlanmasının iki ana sebebi var:

  1. React Native ile uygulamanızın çalışma mantığı JavaScript ile yazılabiliyorken, arayüzü (UI) tamamen native kalabiliyor. Bu sebepten HTML5 UI kaynaklı herhangi bir sorun yaşamıyorsunuz.
  2. React Native kullanıcı arayüzü geliştirmede alışılmışın dışında, radikal ve yüksek fonksiyonlu bir yaklaşım sunuyor.

React Native’in çıkış noktası React programlama modelininin gücünü mobil uygulama geliştirmeye getirmek. React Native’in cross platform (her işletim sisteminde çalışabilme) olma gibi bir hedefi yok. Aşağıda React Native’i iOS ortamında nasıl kullanabileceğinize dair küçük bir örnek var. Konsepti yakalarsanız Android ve diğer platformlarda da rahatlıkla uygulayabilirsiniz.

Aşağıdaki örnekte React Native ile Sahibinden.com benzeri bir uygulama geliştireceğiz. Fakat daha basit ve yalın olacak tabii ki. Bir adet arama kutucuğu olacak ve buraya yazdığımız isme ya da lokasyona göre sonuçları listeleyeceğiz ve sonra bu sonuçlardan birine tıklandığında da detayı göstereceğiz. Ve bütün bunları React Native ile yapacağız!

react-native-ornek

Eğer daha önce JavaScript ile program yazmadıysanız korkmanıza gerek yok, bu örnekte adım adım yapmanız gerekenler anlatılacak. React stil için CSS kullanır ve genelde okuması ve anlaması kolaydır.

Hazırsanız, başlıyoruz. Bismm…

Başlarken

React Native framework’ünü GitHub üzerinden indirebilirsiniz. Framework’ü git komutunu kullanarak klonlayabilir ya da doğrudan zip dosyası olarak bilgisayarınıza indirebilirsiniz. Eğer kaynak kodlarla çok ilgilenmeyecekseniz CLI (komut satırı arayüzü) kullanarak da React Native projenizi yaratabilirsiniz. Bu örnekte biz de bu yöntemi kullanacağız.

React Native JavaScript kodları için Node.js kütüphanesini kullanır. Eğer makinanızda Node.js kurulu değilse ilk iş olarak onu kurmakla başlayalım.

Fakat.. Node.js’yi de kurabilmek için önce Homebrew‘i kuralım.

Aşağıdaki komutu terminalde çalıştırıp Homebrew’i kurabilirsiniz.

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

homebrewHomebrew’i kurduktan sonra terminalde aşağıdaki komutu çalıştırarak Node.js’yi kurabilirsiniz.

brew install node

brew kurulum

Sonraki adım olarak watchman kuracağız. React Native watchman’i kullanarak kodunuzun ne zaman değiştiğini takip eder ve ona göre build eder. Otomatik olarak kodunuzu kaydeder.

brew install watchman

watchman kurulum

Şimdi npm kullanarak React Native CLI aracını kuralım:

npm install -g react-native-cli

react native cli

npm ya da uzun adıyla Node Package Manager (Node Paket Yöneticisi) ile CLI aracını indirip kurabilirsiniz. npm işlev olarak CocoaPods veya Carthage ile eşdeğerdir.

Şimdi React Native uygulamanızı geliştireceğiniz klasöre gidin ve CLI tool’unu kullanarak projenizi oluşturun. Bu örnekte projemizin adı PropertyFinder olacak.

react-native init PropertyFinder

init

Bu komut ile React Native uygulamanız için gerekli tüm proje dosyaları otomatik olarak yaratılmış olacak.

Oluşan proje klasörlerini incelediğinizde node_modules adında bir klasör göreceksiniz. Bu klasörün içinde React Native framework’ü bulunur. Ayrıca index.ios.js adında bir dosya göreceksiniz. Bu dosya CLI tarafından yaratılan ve uygulamanızın iskeletini oluşturan kısımdır. Son olarak Xcode proje dosyası ve iOS klasörü göreceksiniz. Bu klasörde uygulamanız için gerekli bootstrap kodları vardır.

Klasörün içindeki Xcode projesini açıp build ettikten sonra çalıştırın. Simülatör açılacak ve aşağıdaki ekran çıkacak:

ReactNative-Starter

Aynı zamanda yeni bir terminal ekranında aşağıdaki şekilde bir ekranın çıktığını göreceksiniz:

 ===============================================================
 |  Running packager on port 8081.       
 |  Keep this packager running while developing on any JS         
 |  projects. Feel free to close this tab and run your own      
 |  packager instance if you prefer.                              
 |                                                              
 |     https://github.com/facebook/react-native                 
 |                                                              
 ===============================================================
 
Looking for JS files in
   /Users/sensahin/Temp/TestProject
 
React packager ready.

Bu gördüğünüz aslında node altında çalışan React Native paket sistemi. Bu paketin ne yaptığını biraz sonra öğreneceksiniz. Bu noktada unutmamanız gereken şey yeni ekranda açılan terminal penceresini kapatmamanız gerektiği. Arka tarafta çalışıyor olması lazım yoksa kodunuzu derlerken hata alırsınız. Yanlışlıkla kapatırsanız projeyi Xcode üzerinden durdurup tekrar çalıştırmanoz yeterli.

Not: Daha derinlere inmeden önce küçük bir not düşeyim; bu örnekte çok fazla JavaScript kodu yazıyor olacaksınız ve Xcode bu iş için çok iyi olmayabilir. En azından benim için öyle. Ben Sublime Text kullanıyorum ve size de şiddetle öneriyorum.

Merhaba React Native

Emlak arama uygulamamıza geçmeden önce gelenek olduğu üzere çok basit bir Merhaba Dünya uygulaması yazacağız.

index.ios.js dosyasını text editör ile açın ve içeriğini silin. Aşağıdaki kodu başlangıç kısmına yazın:

'use strict';

Strict mod gelişmiş bir hata yönetimi (error handling) sunar.

Sonra, aşağıdaki kodu ekleyin:

var React = require('react-native');

Bu satırdaki kod react-native modülünü yükler ve onu React’e atar. React Native Node.js ile aynı modül yükleme teknolojisini kullanır.

require kodunu içeren satırdan sonra aşağıdakini ekleyin:

var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  }
});

Bu kod basit bir stil ekler uygulamanıza. Daha önce CSS ile uğraştıysanız zaten bu ifadeler size yabancı gelmeyecektir.

Devam ediyoruz. Stil kodlarını yazdığımız satırların altına aşağıdaki kodu ekliyoruz:

class PropertyFinderApp extends React.Component {
  render() {
    return React.createElement(React.Text, 
{style: styles.text}, "Hello World!");
  }
}

Evet, yanlış görmediniz; bu bir JavaScript class’ı!

Son olarak aşağıdaki kısmı kodunuza ekleyin:

React.AppRegistry.registerComponent('PropertyFinder', function() { 
return PropertyFinderApp });

index.ios.js içinde yapmış olduğunuz değişiklikleri kaydedin ve Xcode’a geri dönün. PropertyFinder scheme seçili iken projenizi build edip çalıştırın. Birkaç saniye sonra “Merhaba Dünya” uygulamanızın çalıştığını göreceksiniz:

react-helloworld-281x500

Yukarıda gördüğünüz tarayıcıya ihtiyaç duymadan simülatörde çalışan, native UI render eden bir JavaScript uygulaması!

İnanmadınız mı :) Kendiniz de bunu kontrol edebilirsiniz: Xcode içerisinde Debug/View Debugging/Capture View Hierarchy seçeneğine seçerek hiyerarşiye bakabilirsiniz. İncelediğinizde herhangi bir UIWebView instance’i olmadığını göreceksiniz.

Peki bu şekilde nasıl çalıştığını merak ediyor musunuz? Xcode içerisinde AppDelegate.m dosyasını açın ve application:didFinishLaunchingWithOptions kısmını bulun. Bu metot RCTRootView build eder ve bu View JavaScript uygulamasını yükleyip view içerisinde render eder.

Uygulama başladığında, RCTRootView uygulamayı aşağıdaki URL’den yükler:

http://localhost:8081/index.ios.bundle

Uygulamayı ilk çalıştırdığınızda açılan yeni terminal penceresini hatırladınız mı? İşte bu pencere sayesinde sunucu yukarıdaki request’leri kabul eder ve işler.

Bu URL’i Safari’de açarsanız uygulamanızın JavaScript kodlarını görürsünüz.

Uygulamanız başladığında bu kod yüklenir ve JavaScriptCore framework’ü tarafından çalıştırılır. Bu uygulama örneğinde PropertyFinderApp komponenti yüklenir ve native UIKit view’ı inşa edilir.

JSX Kullanımı

Yukarıda oluşturduğumuz Hello World uygulaması React.createElement elementini kullanır.

Uygulama çalışırken index.ios.js dosyasına dönün ve returnstatement kısmını aşağıdaki şekilde değiştirin:

return <React.Text style={styles.text}>Hello World (Again)</React.Text>;

İşte bu JSX. Bu JavaScript sintaks uzantısı sayesinde HTML-benzeri sintaksı direkt olarak JavaScript kodunuza gömebilirsiniz.

index.ios.js içindeki değişiklikleri kaydedin ve simülatöre geri dönün. Cmd+R basarak uygulamanızı refresh ettiğinizde ekranda “Hello World (Again)” yazısını göreceksiniz.

Gördüğünüz gibi React Native uygulamasını tekrar çalıştırmak tarayıcıda sayfayı resfresh etmek kadar kolay :)

Tamam, Hello World uygulaması ile olan işimiz bitti. Şimdi gerçek fonksiyonlu bir uygulama geliştirmeye geçiyoruz!

Navigasyon Ekleme

Property Finder uygulaması UIKit’in navigasyon kontrollerinden olan standart stack-based navigasyon deneyimini kullanacak. Şimdi bu seçeneği ekleyelim.

index.ios.js içerisinde HelloWorld sınıfını PropertyFinderApp olarak değiştirin:

class HelloWorld extends React.Component {

Hello World yazısını biraz daha ekranda tutacağız fakat bu uygulamamızın ana komponenti olmayacak.

Şimdi aşağıdaki class’ı HelloWorld komponentine ekleyin:

class PropertyFinderApp extends React.Component {
  render() {
    return (
      <React.NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'Property Finder',
          component: HelloWorld,
        }}/>
    );
  }
}

Bu kod ile bir navigasyon kontroller’ı yaratmış ve bir stil uygulayarak ana rutu HelloWorld komponentine yönlendirmiş olursunuz.

Aynı dosya içerisinde stil deklarasyonunu aşağıdaki şekilde değiştirin:

var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  },
  container: {
    flex: 1
  }
});

Biraz sonra flex: 1 ne demek onu da açıklayacağım. Şimdi simülatöre geri dönün ve cmd+R butonlarına basarak yeni arayüzünüzü inceleyin:

react-helloworldagain-281x500

Yukarıdaki örnekte root view ile birlikte bir navigasyın kontroller’ı var ve bu kontroller Hello World yazısını gösteriyor. Şimdi biraz gerçek UI ekleyelim!

Arama Sayfası

Şimdi arama sayfamızı hazırlayalım. Projenize SearchPage.js adında yeni bir dosya ekleyin ve index.ios.js ile aynı klasörde olmasına dikkat edin. Aşağıdaki kodu bu dosyanın içine ekleyin:

'use strict';
 
var React = require('react-native');
var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

Daha sonra aşağıdaki kodu ekleyin:

var styles = StyleSheet.create({
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: 'center',
    color: '#656565'
  },
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  }
});

Gördüğünüz gibi standart CSS kullandık.

Şimdi bu stilin altına aşağıdaki komponenti ekleyin:

class SearchPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.description}>
          Search for houses to buy!
        </Text>
        <Text style={styles.description}>
          Search by place-name, postcode or search near your location.
        </Text>
      </View>
    );
  }
}

render JSX kullanımı ile ilgili çok güzel bir örnek.

Son olarak aşağıdaki kodu ekleyin:

module.exports = SearchPage;

Bu modül SearchPage class’ının başka dosyalarda kullanılmasına izin vererek export eder.

Sonraki adımda uygulamanın rutunu güncellememiz gerekir.

index.ios.js dosyasını açın ve aşağıdaki kodu en tepedeki require satırından hemen sonraya ekleyin:

var SearchPage = require('./SearchPage');

render fonksiyonu içerisinde initialRoute kısmını yeni eklediğimiz SearchPage sayfasına referans verecek şekilde güncelleyin:

component: SearchPage

Bu noktada HelloWorld class’ını ve ona bağlı stili isterseniz kaldırabilirsiniz. Kodun bu kısmına ihtiyacınız olmayacak.

Şimdi simülatöre geri dönün ve cmd+R ile yeni arayüzü inceleyin:

react-searchstarter-281x500

Flexbox ile stil hazırlama

Şimdiye kadar temel CSS elementleriyle margin, padding ve renk ayarlama kısımlarını hallettik. Fakat flexbox diye bir şey var ki bunun sayesinde uygulama UI arayüzü hazırlamak çok kolay.

Uygulamanızda container’ın sütun şeklinde bir yönü var yani bu şu demek; ona bağlı elemanlar dikey olarak sıralanacak. Yani şu şekilde:

FlexStack

Şimdi arama yapılabilmesi için bir adet kutucuk ve butonlarımızı ekleyelim. SearchPage.js dosyasını açın ve aşağıdaki kodu ikinci Text elementinden hemen sonra ekleyin:

<View style={styles.flowRight}>
  <TextInput
    style={styles.searchInput}
    placeholder='Search via name or postcode'/>
  <TouchableHighlight style={styles.button}
      underlayColor='#99d9f4'>
    <Text style={styles.buttonText}>Go</Text>
  </TouchableHighlight>
</View>
<TouchableHighlight style={styles.button}
    underlayColor='#99d9f4'>
  <Text style={styles.buttonText}>Location</Text>
</TouchableHighlight>

Burada iki tane top-level view ekledik: biri text input diğeri ise buton.

Şimdi aşağıdaki stili style tanımlamasının olduğu yere ekleyin:

flowRight: {
  flexDirection: 'row',
  alignItems: 'center',
  alignSelf: 'stretch'
},
buttonText: {
  fontSize: 18,
  color: 'white',
  alignSelf: 'center'
},
button: {
  height: 36,
  flex: 1,
  flexDirection: 'row',
  backgroundColor: '#48BBEC',
  borderColor: '#48BBEC',
  borderWidth: 1,
  borderRadius: 8,
  marginBottom: 10,
  alignSelf: 'stretch',
  justifyContent: 'center'
},
searchInput: {
  height: 36,
  padding: 4,
  marginRight: 5,
  flex: 4,
  fontSize: 18,
  borderWidth: 1,
  borderColor: '#48BBEC',
  borderRadius: 8,
  color: '#48BBEC'
}

Buraya eklediğimiz stil hem buton hem de text input tarafından kullanılacak.

Şimdi simülatöre geri dönün ve cmd+R ile yeni arayüzü inceleyin:

react-searchpageinput-281x500

Sonraki adım olarak arama sayfasını tamamlamak için bir adet ev görseli ekleyelim. Görseli buradan indirebilirsiniz.

Xcode içerisinde Images.xcassets dosyasını açın ve artı butonuna tıklayarak yeni bir görsel seti ekleyin. Sonra ev görselini doğru slot içine sürükleyip bırakın:

AddingHouseImage-700x459

Uygulamanızı burada durdurup yeninden başlatmanız gerekiyor ki bu görseller React Native uygulamanızda görünür hale gelsin.

Aşağıdaki kodu TouchableHighlight komponentinin hemen altına ekleyin:

<Image source={require('image!house')} style={styles.image}/>

Şimdi görselin ilgili stilini style tanımlamasının en sonuna ekleyin:

image: {
  width: 217,
  height: 138
}

require(‘image!house’) ifadesi asset kataloğuna eklediğiniz görselin kullanılması gerektiğini bildirir.

Şimdi simülatöre geri dönün ve cmd+R ile yeni arayüzü inceleyin:

react-searchpagehouse-281x500

İlk React Native uygulamanız harika gözüküyor! Şimdi biraz fonksiyon ekleyelim.

Komponent State’i Ekleme

Her bir React komponentinin kendi state objesi vardır ve bu obje bir anahtar değer saklamak için kullanılır. Bir komponenti render etmeden önce state’ini belirtmeniz gerekir.

SearchPage.js içerisinde aşağıdaki kodu render() kısmından hemen önce SearchPage class’ına ekleyin:

constructor(props) {
  super(props);
  this.state = {
    searchString: 'london'
  };
}

Komponentinizin şimdi bir adet state değişkeni var.

Şimdi bu komponent state’ini kullanalım. render sayesinde TextInput elementini aşağıdaki şekilde değiştirelim:

<TextInput
  style={styles.searchInput}
  value={this.state.searchString}
  placeholder='Search via name or postcode'/>

Şimdi event handler olacak şekilde bir metot oluşturalım ki kullanıcılar bu arama kutucuğuna birşeyler yazdığında olabilecek sonuçları ayarlayalım. SearchPage class’ı içerisine aşağıdaki kodu ekleyin:

onSearchTextChanged(event) {
  console.log('onSearchTextChanged');
  this.setState({ searchString: event.nativeEvent.text });
  console.log(this.state.searchString);
}

Bu kod text elementindeki değeri alır ve komponentin durumunu güncellemede kullanır.

Aşağıdaki onChange property’sini kodunuza ekleyin:

<TextInput
  style={styles.searchInput}
  value={this.state.searchString}
  onChange={this.onSearchTextChanged.bind(this)}
  placeholder='Search via name or postcode'/>

Kullanıcı ne zaman yazıyı değiştirirse onChange tarafından sunulan fonksiyon çalıştırılacak.

Uygulamanızı refresh etmeden önce son adım olarak aşağıdaki logging ifadesini render()’in en tepesine return’den hemen önceki kısma ekleyin:

console.log('SearchPage.render');

Bu loglar sayesinde çok faydalı şeyler öğreneceksiniz :)

Simülatöre geri dönün ve cmd+r butonlarına basın. Şimdi arama kutucuğunda “london” değerini göreceksiniz ve bu text’i editlemeye başladığınızda Xcode konsol ekranında aşağıdaki logları göreceksiniz:

react-renderconsole

React ile uygulama arayüzünüzün hangi kısmının durum değişikliği geçirdiğini düşünmenize gerek yok, çünkü UI’nin tamamı uygulama state’inin bir fonksiyonu olarak ifade ediliyor.

Bu noktada çok radikal bir durumu kesin olarak gözlemlediğinizi düşünüyorum: performans!

Şimdi kodunuzu son kez gözden geçirin ve en son eklediğiniz loglama kısmını kaldırın çünkü buna çok ihtiyacınız yok şimdilik.

Arama Yapma

Şimdi text kutumuz tamam, arama yapabilmek için butonumuza bir fonksiyon tanımlamamız gerekiyor.

SearchPage.js içinde state’i aşağıdaki gibi güncelleyin:

this.state = {
  searchString: 'london',
  isLoading: false
};

isLoading sayesinde uygulamanız herhangi bir query var mı yok mu dinleyecek.

Aşağıdaki kodu render’in başlangıcına ekleyin:

var spinner = this.state.isLoading ?
  ( <ActivityIndicatorIOS
      hidden='true'
      size='large'/> ) :
  ( <View/>);

Aşağıdaki kodu Image’in hemen altına ekleyin:

{spinner}

Şimdi, TouchableHighlight etiketi içerisine aşağıdaki kodu ekleyin:

onPress={this.onSearchPressed.bind(this)}

SearchPage class’ına aşağıdaki metodu ekleyin:

_executeQuery(query) {
  console.log(query);
  this.setState({ isLoading: true });
}
 
onSearchPressed() {
  var query = urlForQueryAndPage('place_name', this.state.searchString, 1);
  this._executeQuery(query);
}

Son olarak aşağıdaki fonksiyonu SearchPage class deklarasyonunun en tepesine ekleyin:

function urlForQueryAndPage(key, value, pageNumber) {
  var data = {
      country: 'uk',
      pretty: '1',
      encoding: 'json',
      listing_type: 'buy',
      action: 'search_listings',
      page: pageNumber
  };
  data[key] = value;
 
  var querystring = Object.keys(data)
    .map(key => key + '=' + encodeURIComponent(data[key]))
    .join('&');
 
  return 'http://api.nestoria.co.uk/api?' + querystring;
};

Simülatöre geri dönün ve uygulamayı refresh edin. Go butonuna bastığınızda bir indikatörün döndüğünü göreceksiniz, Xcode log konsoluna baktığınızda şunu göreceksiniz:

SearchAcitivityIndicator-700x169

Not: Bu uygulama emlak arama için Nestoria sitesinin API’sini kullanıyor. API’den dönen JSON cevabı çok açık ve net fakat daha detaylı incelemek isterseniz sitenin API dökümantasyonuna bakabilirsiniz.

Şimdi sonraki adım olarak API requestinde bulunacağız ve dönen sonuçları ekrana yazdıracağız.

API Request

SearchPage.js içerisine message değişkenini ekleyin:

this.state = {
  searchString: 'london',
  isLoading: false,
  message: ''
};

Render içerisinde aşağıdaki kodu UI’nin en altına ekleyin:

<Text style={styles.description}>{this.state.message}</Text>

Kullanıcılara mesajlar göstermek için bunu kullanacağız.

SearchPage class’ı içerisinde aşağıdaki kodu_executeQuery() sonuna ekleyin:

fetch(query)
  .then(response => response.json())
  .then(json => this._handleResponse(json.response))
  .catch(error => 
     this.setState({
      isLoading: false,
      message: 'Something bad happened ' + error
   }));

Son adım olarak aşağıdaki fonksiyonu SearchPage’e ekleyin:

_handleResponse(response) {
  this.setState({ isLoading: false , message: '' });
  if (response.application_response_code.substr(0, 1) === '1') {
    console.log('Properties found: ' + response.listings.length);
  } else {
    this.setState({ message: 'Location not recognized; please try again.'});
  }
}
Çalışmanızı kaydedin ve simülatöre geri dönerek sayfayı refresh edin. Arama kutucuğuna london yazıp arayın. Log konsolunda 20 adet emlağın bulunduğunu söyleyen bir ifade göreceksiniz. Şimdi de olmayan bir lokasyon arayın, örneğin narnia yazıp arayın ve aşağıdaki mesajı görüyor olacaksınız:

react-narnia-281x500

Sonuçları Gösteriyoruz

SearchResult.js adında yeni bir dosya yaratın ve aşağıdaki kodu ekleyin:

'use strict';
 
var React = require('react-native');
var {
  StyleSheet,
  Image, 
  View,
  TouchableHighlight,
  ListView,
  Text,
  Component
} = React;

Evet, doğru gördünüz. require ifadesi kullandık ve react-native modülünü istedik.

Şimdi aşağıdaki komponenti ekleyin:

class SearchResults extends Component {
 
  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource(
      {rowHasChanged: (r1, r2) => r1.guid !== r2.guid});
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.listings)
    };
  }
 
  renderRow(rowData, sectionID, rowID) {
    return (
      <TouchableHighlight
          underlayColor='#dddddd'>
        <View>
          <Text>{rowData.title}</Text>
        </View>
      </TouchableHighlight>
    );
  }
 
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}/>
    );
  }
 
}

Şimdi de aşağıdaki export modülünü en sona ekleyin:

module.exports = SearchResults;

SearchPage.js içerisinde en tepeye require’ın hemen altına aşağıdaki kodu ekleyin:

var SearchResults = require('./SearchResults');

_handleResponse metodunu aşağıdaki şekilde değiştirin:

this.props.navigator.push({
  title: 'Results',
  component: SearchResults,
  passProps: {listings: response.listings}
});

Şimdi simülatöre geri dönün ve uygulamanızı refresh edin. Aşağıdaki şekilde sonuçların döndüğünü göreceksiniz:

react-searchresults1-281x500

Stil Ekleyelim

Evet sonuçları da döndürdük. Fakat biraz karışık gözüküyor. Şimdi biraz stil ekleyelim ve arayüzü güzelleştirelim.

SearchResults.js içine aşağıdaki stili ekleyin:

var styles = StyleSheet.create({
  thumb: {
    width: 80,
    height: 80,
    marginRight: 10
  },
  textContainer: {
    flex: 1
  },
  separator: {
    height: 1,
    backgroundColor: '#dddddd'
  },
  price: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#48BBEC'
  },
  title: {
    fontSize: 20,
    color: '#656565'
  },
  rowContainer: {
    flexDirection: 'row',
    padding: 10
  }
});

Sonra renderRow()’u aşağıdaki ile değiştirin:

renderRow(rowData, sectionID, rowID) {
  var price = rowData.price_formatted.split(' ')[0];
 
  return (
    <TouchableHighlight onPress={() => this.rowPressed(rowData.guid)}
        underlayColor='#dddddd'>
      <View>
        <View style={styles.rowContainer}>
          <Image style={styles.thumb} source={{ uri: rowData.img_url }} />
          <View  style={styles.textContainer}>
            <Text style={styles.price}>£{price}</Text>
            <Text style={styles.title} 
                  numberOfLines={1}>{rowData.title}</Text>
          </View>
        </View>
        <View style={styles.separator}/>
      </View>
    </TouchableHighlight>
  );
}

Son adım olarak aşağıdaki metodu ekleyin:

rowPressed(propertyGuid) {
  var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];
}

Simülatöre geri dönün ve refresh edin. Şöyle bir ekran gelmesi lazım:

react-searchresults2-281x500

Şahane değil mi :) En ufak bir Objective C veya Swift kodu kullanmadan sadece JavaScript ile native mobil uygulaması yazıyoruz, insan daha ne ister :)

Emlak Detay Görünümü

Şimdi gelen sonuçlardan birine tıkladığımızda bizi detay sayfasına götürsün ve bu detay sayfasında bizi o emlakla ilgili detaylı bilgi versin istiyoruz.

PropertyView.js adında yeni bir dosya oluşturun ve aşağıdaki kodu en tepeye ekleyin:

'use strict';
 
var React = require('react-native');
var {
  StyleSheet,
  Image, 
  View,
  Text,
  Component
} = React;

Şimdi de aşağıdaki stili ekleyin:

var styles = StyleSheet.create({
  container: {
    marginTop: 65
  },
  heading: {
    backgroundColor: '#F8F8F8',
  },
  separator: {
    height: 1,
    backgroundColor: '#DDDDDD'
  },
  image: {
    width: 400,
    height: 300
  },
  price: {
    fontSize: 25,
    fontWeight: 'bold',
    margin: 5,
    color: '#48BBEC'
  },
  title: {
    fontSize: 20,
    margin: 5,
    color: '#656565'
  },
  description: {
    fontSize: 18,
    margin: 5,
    color: '#656565'
  }
});

Şimdi de komponenti ekleyin:

class PropertyView extends Component {
 
  render() {
    var property = this.props.property;
    var stats = property.bedroom_number + ' bed ' + property.property_type;
    if (property.bathroom_number) {
      stats += ', ' + property.bathroom_number + ' ' + (property.bathroom_number > 1
        ? 'bathrooms' : 'bathroom');
    }
 
    var price = property.price_formatted.split(' ')[0];
 
    return (
      <View style={styles.container}>
        <Image style={styles.image} 
            source={{uri: property.img_url}} />
        <View style={styles.heading}>
          <Text style={styles.price}>£{price}</Text>
          <Text style={styles.title}>{property.title}</Text>
          <View style={styles.separator}/>
        </View>
        <Text style={styles.description}>{stats}</Text>
        <Text style={styles.description}>{property.summary}</Text>
      </View>
    );
  }
}

Son olarak da dosyanın sonuna aşağıdaki export modülünü ekleyin:

module.exports = PropertyView;

SearchResults.js dökümanına geri dönün ve require ifadesini ekleyin en tepeye:

var PropertyView = require('./PropertyView');

Şimdi rowPressed() kısmını güncelleyin:

rowPressed(propertyGuid) {
  var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];
 
  this.props.navigator.push({
    title: "Property",
    component: PropertyView,
    passProps: {property: property}
  });
}

Simülatöre geri dönün ve uygulamanızı refresh edin. Detaya tıkladığınızda aşağıdaki ekran gelecek:

react-property-281x500

Geolocation Kullanımı

Uygulamamız kullanıcıların lokasyon bilgisini kullanacağından öncelikle kullanıcılardan bunun iznini almamız lazım.

Xcode içinde Info.plist dosyasını açın ve Add Row butonuna tıklayarak yeni bir anahtar ekleyin. NSLocationWhenInUseUsageDescription anahtar adı olarak girin ve aşağıdaki değeri yazın:

PropertyFinder would like to use your location to find nearby properties

plist dosyanızın şu şekilde gözükmesi lazım:

Screen-Shot-2015-03-20-at-21.49.06-480x162

SearchPage.js açın ve TouchableHighlight kısmını bulun ve aşağıdaki değeri ekleyin:

onPress={this.onLocationPressed.bind(this)}

SearchPage body kısmına aşağıdaki kodu ekleyin:

onLocationPressed() {
  navigator.geolocation.getCurrentPosition(
    location => {
      var search = location.coords.latitude + ',' + location.coords.longitude;
      this.setState({ searchString: search });
      var query = urlForQueryAndPage('centre_point', search, 1);
      this._executeQuery(query);
    },
    error => {
      this.setState({
        message: 'There was a problem with obtaining your location: ' + error
      });
    });
}

Tebrikler! Uygulamanız kullanıma hazır :)

Yukarıdaki örnek uygulamanın bütün proje dosyalarını ve kodlarını GitHub üzerinde bulabilirsiniz.

Umarım React Native nedir ne değildir biraz fikir edinmişsinizdir.

Hadi şimdi koşun ve kendi emlak arama uygulamanızı React Native ile geliştirin. Başarılar.

Not: Bu yazı http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript adresinden Türkçe’ye çevrilmiştir.

PAYLAŞ

5 YORUM

  1. Merhaba,
    Bahsettiğiniz react native uygulamasını IOS üzerinde çalıştırmışsınız.
    Acaba aynı dosyayı aynı şekilde android’ de de çalıştırmak mümkün müdür ?
    Android ile ilgili react native navigator örneği koyabilir misiniz ? Teşekkürler.

  2. Merhaba,
    Ubuntu Linux ile çalışıyorum.
    “…Klasörün içindeki Xcode projesini açıp build ettikten sonra çalıştırın…”
    kısmında nasıl build edip ekranı görebileceğim?

CEVAP VER