Kategori Arşivleri: React Native

React Native

React Native – width, height, flex özelliklerini kavramak

React Native’de sabit bir büyüklükte görünmesini istediğimiz nesnelerimize en ve boy vermek için width ve height kullanabiliriz. <View style={{width: 50, height: 50, backgroundColor: ‘powderblue’}} /> Değişen ekran tasarımlarına ayak uydurmak için flex ile tasarım yapmak daha cazip duruyor. flex:1, dersek ekranda bir tane bileşen olur ve ekranı tamamen kaplar. Aşağıdaki gibi bir kod kullanırsak: <View>>>

React Native – style özelliğini kavramak

React Native – style özelliğini kavramak

React Native’de büyün ana bileşenlere style özelliği ile stil bilgisi vererek dizayn yapabiliriz. Daha derli toplu olması için StyleSheet import edip, StyleSheet.create ile bir styles sabiti yaratıp, onu ilgili yerlerde kullanmak daha şık durabilir. Şöyle ki: const styles = StyleSheet.create({ bigblue: { color: ‘blue’, fontWeight: ‘bold’, fontSize: 30, }, red: { color: ‘red’, }, });>>>

React Native – state özelliğini kavramak

React Native – state özelliğini kavramak

props ile tanımladığımız değişkenler bileşenin ömrü boyunca sabit kalır demiştik, süreçte değişmesini istediğimiz parametreleri ise state ile kontrol ederiz. constructor yani kurucu/yapıcı metot içerisinde state ile tanımlanan değişken süreçte setState ile yeni değerler verilerek kullanılabilir. class YanSon extends Component { constructor(props) { super(props); this.state = { isShowingText: true }; setInterval(() => ( this.setState(previousState => (>>>

React Native – props özelliğini kavramak

React Native - props özelliğini kavramak

Bir bileşen oluşturup, ona gönderdiğimiz değişkene göre bileşenin hareket etmesi için props özelliğini kullanabiliriz. Örneğin bir Selamlama sınıfı yazalım ve ismini verdiğimiz kişiye Merhaba diyelim. class Selamlama extends Component { render() { return ( <View style={{alignItems: ‘center’}}> <Text>Merhaba {this.props.name}!</Text> </View> ); } } Kullanımı: <Selamlama name=”Ahmet”></Selamlama> <Selamlama name=”İsmet”></Selamlama> <Selamlama name=”Murat”></Selamlama> <Selamlama name=”Tural”></Selamlama> props ile tanımladığımız>>>

React Native’de Check the render method of ‘App’. hatasını nasıl çözebiliriz?

React Native

Aşağıdaki gibi korkunç bir hata listesi geldi. Oysa yaptığım hata fazladan süslü parantez kullanmakmış 🙂 Oluşturmuş olduğum bileşeni import ederken kullandığım fazladan süslü parantez: import {Toolbar} from ‘./app/components/Toolbar/Toolbar’ yerien import Toolbar from ‘./app/components/Toolbar/Toolbar’ olmalıymış. Bileşen içinde birden fazla sınıf olursa o zaman süslü parantez ile içeri alabiliriz. Invariant Violation: Element type is invalid: expected a>>>

React Native’de Register Ekranı Oluşturmak

React Native Register

React Native’de Register Ekranı Oluşturmak import React, {Component} from ‘react’ import {TouchableOpacity, View, Text,TextInput,Button,StyleSheet} from ‘react-native’ class Register extends Component{ constructor(){ super(); this.state={ credentials:{ login:””, password:”” } } } updateText(text,field){ let newCredentials=Object.assign(this.state.credentials) newCredentials[field]=text this.setState({ credentials:newCredentials }) } register(){ //this.props.navigation.navigate(“main”) alert(JSON.stringify(this.state.credentials)) } render(){ return( <View style={{height:100 + “%”, width:100+”%”,flex:1,justifyContent:”center”,alignItems:”center”}} > <Text>Register</Text> <TextInput onChangeText={(text) => this.updateText(text,”login”)} value={this.state.login}>>>

React Navigation Kullanımı

React Navigation

React Native ile proje geliştirirken daha kolay ve hızlı menü işlemleri için önerilen https://reactnavigation.org/en/ kütüphanesi ile ilgili aldığım notlar: <MainStack></MainStack> Proje klasörümüzde komut dosyasını açarak yarn add react-navigation komutunu çalıştırıp react-navigatin kütüphanesini projemize ekliyoruz. Başlangıç dosyasına kullanılacağımız parçaları ekliyoruz: import { SwitchNavigator,TabNavigator } from ‘react-navigation’; const MainStack= SwitchNavigator({ login:Login, main:MainFeed }) şeklinde login ve main>>>

React Native ile Instagram klonu yapma

React Native

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