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

1	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

1	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>

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

import React, {Component} from 'react';

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

export default class App extends Component {

render() {

return (

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

1	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
    });
}

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}}

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

Instagram, Instagram klonu, React Native

Ahmet Cevahir ÇINAR

kendime notlar…

React Native ile Instagram klonu yapma

Related Posts:

Bir cevap yazın Cevabı iptal et