React Native ile Instagram klonu yapma

React Native ile Instagram klonu yapma https://youtu.be/o7eB8wG20iw adresindeki videoyu izlerken aldığım notlardır:

React Native tek kod ile hem Android, hem iOS hem de web için uygulama hazırlama iddiası yüzünden cezbetti beni 🙂

Javascript ile HTML ve CSS benzeri bir yaklaşımla tasarım ve programlama imkanı sunuyormuş.

İnceleyip, göreceğiz bakalım.

React Native kurulumu tamamlandıktan sonra,

react-native init projeismi

komutunu komut satırından çalıştırarak projenin oluşmasını sağlayabilirsiniz.

Android Studio ile birlikte gelen emülatörü çalıştırıp, terminalden,

react-native run-android

komutu ile projeyi derleyebiliyoruz.

Bu süreçte epey hatalar aldım, siz de alabilirsiniz. Hata mesajlarını takip ederek çözüm üretmek gereklidir.

Platform’a göre mesaj çıkarmak için:

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

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

<Text style={styles.instructions}>{instructions}</Text>

Temel App.js dosyasının içeriği:

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Aktif ekranın genişliğini nasıl alırız?

import {Dimensions} from 'react-native'

İlgili sınıf kodunun hemen altına:

constructor(){
    super();
    this.state={screenWidth:0};
}

componentDidMount(){
    this.setState({
        screenWidth: Dimensions.get("window").width
    });
}

Kullanmak istediğimiz yerde de aşağıdaki şekilde kullanırız.

<Image style={{ width:this.state.screenWidth, height:100}}

ASKON Konya’da MEVKA TeknoGirişim Girişimci-Yatırımcı Buluşmaları’na katıldım

ASKON Konya’nın MEVKA TeknoGirişim Girişimci-Yatırımcı Buluşmaları kapsamında 23 Ağustos 2023 Çarşamba günü ASKON Konya şubesinde>>>

24
Ağu

Matlab’da matrisin tüm elemanlarını belirli bir sayıdan nasıl çıkarırız?

Elimizde doğruluk oranlarının olduğu bir k matrisi olduğu varsayalım, bu matris içerisindeki tüm değerleri 1>>>

22
Şub

Matlab’ta iç içe döngüyle matris gezerek istediğimiz veriyi nasıl buluruz?

Başlık tam ifade eder mi bilmiyorum ama benim ihtiyacım olan şey 10 sütun, 1593 satıra>>>

20
Şub

A Review on Deep Learning-Based Methods Developed for Lung Cancer Diagnosis

Yüksek Lisans öğrencilerimden Türkan Beyza KARA’nın sunmuş olduğu “A Review on Deep Learning-Based Methods Developed>>>

09
Oca

İlk yabancı yazarlı ortak makalem yayınlandı

Birbirimizi hiç görmeden ve sesli olarak da hiç konuşmadan e-posta üzerinden tanışıp ortak bir çalışma>>>

4 Comments

21
Eki

Konya’da göz lazer ameliyatı oldum

25 yıldır takmakta olduğum ve kendisinden ayrılırken 6,5 numara olan gözlüğüme Konya’da göz lazer ameliyatımı>>>

21
Ağu

Tek kelimeyle beni nasıl tanımladılar?

YouTube üzerinden yapmış olduğum bir yoruma gelen yanıtta “…dürüst olun…” içeriğini görünce aklıma geçtiğimiz günlerde>>>

3 Comments

02
Ağu

Konya Akıllı Şehir HACKATHON’unda 3.olduk

Kısaca daha önceki yazımda bahsettiğim Konya Akıllı Şehir HACKATHON’unda 3.olduk. Selçuk Üniversitesi Teknoloji Fakültesi Bilgisayar>>>

1 Comment

29
May

Sentius ekibi olarak, Akıllı Şehir HACKATHON’una katıldık

Konya Akıllı Şehir HACKATHON’unda 3.olduk Konya Bilim Merkezi ile GDG Konya’nın düzenlediği Akıllı Şehir HACKATHON’una>>>

1 Comment

29
May

BİLMÖK 2022 için yazılmış gecikmiş bir yazı :)

Türkiye’nin en büyük öğrenci kongresi BİLMÖK 21-23 Mayıs 2022 günlerinde Konya’da Konya Teknik Üniversitesi’nin organizasyonuyla>>>

24
May

Genç Bakış Gazetesi’nden Beyzanur Polat’ın yaptığı haber…

Genç Bakış Gazetesi’nden Beyzanur Polat’ın yaptığı haber…>>>

22
Kas

Binary Sooty Tern Optimization Algorithms for solving Wind Turbine Placement Problem

Binary Sooty Tern Optimization Algorithms for solving Wind Turbine Placement Problem İndirmek için tıklayınız.>>>

10
Eyl

Konya Model Fabrika’yı Ziyaretim ve Konya Dijital Dönüşüm

“konya dijital dönüşüm” kelimesini Google üzerinden arattığım zaman Konya Model Fabrika‘yı keşfettim. 5 Ağustos 2021>>>

06
Ağu

Otomatlar, Biçimsel Diller ve Turing Makineleri – Dr. Emre Sermutlu – Cinius Yayınları

2020-2021 bahar yarıyılında Otomata Teorisi ve Biçimsel Diller dersini verirken kullanmam için Selçuk Üniversitesi Teknoloji>>>

21
Mar

4-6 MART 2021 ÇEVRİMİÇİ TÜBİTAK-2237-B PROJE EĞİTİMİ ETKİNLİĞİ KTÜ – TRABZON

Alanında dünyada öncü Prof. Dr. Yener EYÜBOĞLU, Prof. Dr. Asım KADIOĞLU, Prof. Dr. Nurettin YAYLI,>>>

06
Mar

ARDEB 1001 – 2020 Sonuçlarını Değerlendirme ve Yenilikler Toplantısı

>>>

19
Şub

2021 yılı içerisinde değerlendirilebilecek konferanslar

GLOBAL CONFERENCE on ENGINEERING RESEARCH online 2-5 June 2021 Abstract or Full Paper Submission: 2>>>

08
Şub

Sayfamda paylaştığım bütün Karikatürler silinmiştir

İsimsiz bir uyarı yorumuyla araştırdığım vakit gördüm ki bazı karikatüristler blog sayfalarında karikatür paylaşanlara dava>>>

23
Oca

MATLAB – Error: Functions cannot be indexed using {} or . indexing.

data = get(z9).OutputData{1}; satırında aşağıdaki şekilde hata vermekteydi. Error: Functions cannot be indexed using {}>>>

16
Oca

“ERASMUS+ Yüksek Öğretim” konulu seminer notları

“ERASMUS + Yüksek Öğretim” konulu seminer notları Dr. Öğretim Üyesi Kemal TÜTÜNCÜ hocam tarafından sunulan>>>

01
Oca

React Native