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>>>
Etiket Arşivleri: React Native
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 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