Proje büyüdükçe bileşenler arasındaki veri transferi karmaşıklaştığından Redux kullanımı tavsiye edilmektedir. Başlangıç örneklerinden çok anlamlı olduğu çıkarılamıyor ve hem React Native, hem de React ile kullanım videolarını izledim. Olayı özümseme adına burada adım adım anlatayım ki biraz daha kavrayayım diye düşündüm. O açıdan eksiklikler veya yanlış bilgiler olabilir -diğer tüm yazılarda olduğu gibi- vaktiniz var>>>
Etiket Arşivleri: React Native
19
Ara
Ara
React Native’de istediğimiz yere objeyi nasıl yerleştiririz? CSS’in position absolute özelliği ile yerleştirdiğimiz alanda nereye konumlandırmamız gerekiyorsa right, left, top, bottom özelliklerine değerler vererek yerleşimi sağlayabiliriz. <TouchableOpacity style={styles.closeButton}> <Icon name=”times” size={20} color={colors.lightGray}></Icon> </TouchableOpacity> closeButton:{ position:”absolute”, right:10, top:10, }
17
Ara
Ara
Durum güncellemeleri yapmak için bir fonksiyon çağırdığımızda başka bir fonksiyon daha çağırmamız gerekebilir. Aşağıdaki kod incelenebilir. import React, { Component } from “react”; import { View, Text, Button } from “react-native”; import { styles } from “../css/Stil/”; class Deneme extends Component { constructor() { super(); this.state = { productCount: 0, mesaj: “İlk Mesaj” }; }>>>
20
Kas
Kas
ScrollView içerisinde View çalışmamaktadır. Ekranın kaydırılarak kullanılmasını sağlamak için ScrollView bileşeni kullanılır. horizontal={true} özelliği ile yatayda kaydırma yaptırılabilir. Farklı Viewları kullanmak için yeni bileşen oluşturup, bir sayfada toplanarak kullanılabilir. <ScrollView> <Text style={{fontSize:96}}>The ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are>>>
19
Kas
Kas
TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback bileşenleri ile dokunulabilir bileşenler tasarlayabiliriz. Uzun basma işlevini onLongPress özelliği ile kullanabiliriz. <TouchableHighlight onPress={this._onPressButton} underlayColor=”white”> <View style={styles.button}> <Text style={styles.buttonText}>TouchableHighlight</Text> </View> </TouchableHighlight> <TouchableOpacity onPress={this._onPressButton}> <View style={styles.button}> <Text style={styles.buttonText}>TouchableOpacity</Text> </View> </TouchableOpacity> <TouchableNativeFeedback onPress={this._onPressButton} background={Platform.OS === ‘android’ ? TouchableNativeFeedback.SelectableBackground() : ”}> <View style={styles.button}> <Text style={styles.buttonText}>TouchableNativeFeedback</Text> </View> </TouchableNativeFeedback> <TouchableWithoutFeedback onPress={this._onPressButton} > <View style={styles.button}> <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>>>>
19
Kas
Kas
Button bileşeni ile hazır butonlar ekleyebiliriz. import {Button} from ‘react-native’; ile çağırdıktan sonra tıklandığı zaman yapacağı işlevi aşağıdaki şekilde yazabiliriz. _onPressButton() { Alert.alert(‘Hakkında!’) } aşağıdaki şekilde: <Button onPress={this._onPressButton} title=”Hakkında” color=”#841584″ accessibilityLabel=”Erişilebilirlik mesajı” /> <Button title=”Deaktif Düğme” disabled={true} /> butonlar kullanabiliriz.
18
Kas
Kas
Kullanıcıdan ad ve soyadını isteyip, onChangeText özelliği ile metin değiştikçe ekrana yazacak, onSubmitEditing özelliği ile enter’a veya onay tuşuna basınca ad girildi, soyad girildi şeklinde uyarı yazdıracağız. export default class App extends Component{ constructor(props) { super(props); this.state = {ad: ”, soyad:”, adgirildi: ‘Ad girilmedi’, soyadgirildi: ‘Soyadgirilmedi’}; } render() { return ( <View style={{alignItems:’center’}}> <TextInput style={{color:’red’,>>>
18
Kas
Kas
flexDirection: row özelliğini aldığı zaman yan yana, column özelliğini aldığı zaman alt alta sıralama yapar. justifyContent flex-start: alanın başlangıcından itibaren yerleştirir flex-end: alanın sonundan itibaren yerleştirir center: ortalar space-around: etrafında boşluk bırakarak yerleştirir space-between: baştan ve sondan boşluk bırakmadan yayarak yerleştirir space-evenly: eşit mesafede boşluk bırakarak yerleştirir alignItems özelliği flexDirection’a bağlı olarak justifyContent ile rolleri>>>
18
Kas
Kas
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>>>
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 => (>>>
- 1
- 2