React Native

React Native projesinde Redux nasıl kullanılır?
React Native projesinde Redux nasıl kullanılır?

React Native projesinde Redux nasıl kullanılır?

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…

React Native’de istediğimiz yere objeyi nasıl yerleştiririz?
React Native’de istediğimiz yere objeyi nasıl yerleştiririz?

React Native’de istediğimiz yere objeyi nasıl yerleştiririz?

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

React Native’de fonksiyon içerisinde fonksiyon çağırmak
React Native’de fonksiyon içerisinde fonksiyon çağırmak

React Native’de fonksiyon içerisinde fonksiyon çağırmak

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…

JSON.stringify Kullanımı
JSON.stringify Kullanımı

JSON.stringify Kullanımı

Nesneyi string ifadeye çevirmek için JSON.stringify kullanılabilir. Yalnız sonuçları “” işaretleri arasında veriyor. componentDidMount() { const user=firebase.auth().currentUser; this.setState({ eposta: JSON.stringify(user.email) }); } Ek bir bilgi öğrendim şuradan : https://twitter.com/rickhanlonii/status/1088180821658427393

Text strings must be rendered within a component.
Text strings must be rendered within a <Text> component.

Text strings must be rendered within a component.

Invariant Violation: Invariant Violation: Text strings must be rendered within a component. gibi bir hata veriyor ama hatanın tam yerini belirtmediğinde uğraştırıp duruyor 🙂 Fazladan kod yazımı sırasında yanlışlıkla bıraktığım birkaç karakter yüzünden bu uyarıyı veriyor. Basit bir hata ve…

React Native – ScrollView bileşenini kavramak
React Native – ScrollView bileşenini kavramak

React Native – ScrollView bileşenini kavramak

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…

React Native – Dokunulabilir bileşenleri kavramak
React Native – Dokunulabilir bileşenleri kavramak

React Native – Dokunulabilir bileşenleri kavramak

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()…

React Native – Button bileşenini kavramak
React Native – Button bileşenini kavramak

React Native – Button bileşenini kavramak

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.

React Native – TextInput, onChangeText, onSubmitEditing özelliklerini kavramak
React Native – TextInput, onChangeText, onSubmitEditing özelliklerini kavramak

React Native – TextInput, onChangeText, onSubmitEditing özelliklerini kavramak

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: ”,…

React Native – flexDirection, alignItems, justifyContent özelliklerini kavramak
React Native – flexDirection, alignItems, justifyContent özelliklerini kavramak

React Native – flexDirection, alignItems, justifyContent özelliklerini kavramak

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…