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>>>
Kategori Arşivleri: React Native
React Native
18
Kas
Kas
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’, }, });>>>
18
Kas
Kas
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 => (>>>
18
Kas
Kas
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>>>
12
Kas
Kas
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>>>
06
Kas
Kas
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}>>>
06
Kas
Kas
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>>>
06
Kas
Kas
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>>>
- 1
- 2