“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 4. kısmıdır. Bir önceki makalede (Part 3), React Native’de Stillendirme ve Flex kullanımını örnekleyerek, elementleri boyutlandırma, renklendirme vb. değişiklikler yaparak nasıl özelleştireceğimizi anlattım.

Bu makalede, React Native ‘in en temel yapı taşı olan UI Components (Kullanıcı Arayüzü Bileşenleri) ‘ni anlatacağım. Component dediğimiz şey Türkçe’ye çevirdiğimizde bileşen anlamına geliyor. Sizin uygulamalarınızda işi yerine getiren, yapan her birime birer komponent denir aslında. Amaç bir kere yazalım o komponent’i her yerde kullanalım mantığı vardır. Bir React Native projesinde farklı tipteki UI öğelerini kullanabiliriz. Ancak bir android ve iPhone’da farklı görünebileceğini unutmayın. Text inputs, touchables ve picker’ların farklı örneklerle nasıl yapıldığını öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Text Inputs:

TextInput bileşeni, kullanıcı metin girişlerini almak için kullanılır. Metin girişleriyle kullanılabilecek aksesuarlar aşağıdadır:

placeholder : Bu placeholder metnidir, yani boş bir TextInput’ta gösterilecek metindir.

value: TextInput onChangeText içine yerleştirilecek değer: Bir işlev alır ve bu her metin değişikliğinde çağrılacaktır.

onSubmitEditing: Bir işlev alır ve metin gönderildikten sonra çağrılacaktır.

Aşağıdaki örneğe bakalım:

import React, { Component } from 'react';
import { Text, View, Button,TextInput } from 'react-native';
export default class MainComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }
  render() {
    return (
       <View style={{paddingTop: 100, paddingLeft : 100}}>
        <TextInput
          style={{height: 40}}
          placeholder="Enter a text"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text}
        </Text>
      </View>
    );
  }
}

TextInput öğesine herhangi bir metin yazarsanız, metin içinde aynı metni gösterir. “placeholder” desteği yer tutucuyu koymak için kullanılır. Kullanıcı yazmaya başladığında bu kaldırılır. OnChangeText props bir işlevi alır ve geçerli ‘props‘ metin ’değerini değiştirir. “value” props, metni TextInput öğesine koymak için kullanılır. ‘TextInput’un‘ değerini ’doğrudan değiştirmiyoruz. “state” deki “metin” değerini değiştirir ve “metin” değer olarak atanır. Alttaki “Metin”, kullanıcının yazdığı metnin aynısını koymak için kullanılır.

TextInput’ta özelleştirme için başka birçok sahne var. Bu resmi kılavuzu kontrol ederek daha fazla bilgi edinebilirsiniz.

 

Touch Handling:

Tüm mobil uygulamalar esas olarak parmak dokunuşu kullanılarak işlenir. Bu dokunma hareketleri, dokunma, kaydırma, kıstırma vb. gibi farklı tiplerde olabilir. React Native, farklı hareketleri işlemek için bir hareket yanıtlama sistemi sağlar. Hemen hemen tüm React Native bileşeni kullanıcı parmak dokunuşunu algılayabilir, ancak yalnızca dokunma olayıyla ilgili olan bir bileşene “Touchables” adı verilir. Bu bileşeni kullanarak, farklı tasarıma sahip kendi özel düğmelerimizi oluşturabiliriz. Ayrıca, tek basış ve uzun basış olaylarını tespit etmek için iki farklı props sunar. Sağlayabileceği geri bildirim türleri şunlardır:

TouchableHighlight :

Bu, bir button veya web bağlantısı ile kullanılabilir. Kullanıcı öğeye bastığında görünüm kararır.

TouchableNativeFeedback :

Bu Android’de dalgalanma etkisi gösterecektir. TouchableNativeFeedback, iOS’ta desteklenmez.

TouchableOpacity :

Bu, kullanıcı bastığında buttonun opaklığını azaltır.

TouchableWithoutFeedback :

Dokunulduğunda kullanıcıya herhangi bir geri bildirim göstermek istemiyorsanız kullanın.

Bu türler dışında, tek basış ve uzun basışları tespit etmek için ‘onPress’ ve ‘onLongPress’ aksesuarlarını kullanabiliriz. Bu iki sahne de bir ‘function’ gerektirir.

import React, { Component } from 'react';
import { Text, View, Button,TextInput,TouchableHighlight, StyleSheet } from 'react-native';
export default class MainComponent extends Component {
  onButtonPressed() {
    alert('Button pressed!')
  }
  onButtonLongPressed() {
    alert('Button Long pressed!')
  }
  render() {
    return (
       <View style={{paddingTop: 100, alignItems: 'center'}}>
        <TouchableHighlight onPress={this.onButtonPressed} onLongPress={this.onButtonLongPressed}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Touch it</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }

}
const styles = StyleSheet.create({
  button: {
    width: 260,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'blue',
    borderRadius: 5
  },
  buttonText: {
    color : "white"
  }
});

Burada da görebileceğiniz gibi, TouchableHighlight bileşenindeki tek basış ve uzun basışları tespit etmek için ‘onPress’ ve ‘onLongPress’ desteklerini kullanıyoruz.

Picker:

Picker, kullanıcıdan bir değer listesinden seçim yapmasını istemek için kullanılır. Picker bileşen hem Android hem de iOS’ta kullanılabilir. İşlevsellik hem Android hem de iOS’ta aynıdır, ancak görünüm farklıdır. Aslında yerel Android ve iOS seçicileri kullanıyor ve her ikisi de farklı görünüyor. Seçilen değeri gösterir ve üzerine tıkladığımızda, android’de bir açılır pencerede mevcut değerlerin bir listesini gösterir. İOS’ta, mevcut tüm seçeneklerle birlikte bir kaydırılabilir tekerlek gösterir. Seçici bileşenini, diğer bileşenler gibi ‘react-native’ öğesinden içe aktarabiliriz. Örneğin :

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class MainComponent extends Component {
   state = {day: ''}
   changePickerValue = (d) => {
      this.setState({ day: d })
      alert(`selected ${d}`)
   }
   render() {
      return (
         <View style={{paddingTop: 100}}>
            <Picker selectedValue = {this.state.day} onValueChange={(value, index) =>
    this.changePickerValue(value)
  }>
               <Picker.Item label = "Sun" value = "Sun" />
               <Picker.Item label = "Mon" value = "Mon" />
               <Picker.Item label = "Tues" value = "Tues" />
               <Picker.Item label = "Wed" value = "Wed" />
               <Picker.Item label = "Thurs" value = "Thurs" />
               <Picker.Item label = "Fri" value = "Fri" />
               <Picker.Item label = "Sat" value = "Sat" />
            </Picker>
         </View>
      )
   }
}
export default MainComponent

Bu kodu çalıştırırsanız, bir Android telefonda aşağıdaki gibi görünecektir:

Picker listesinde gösterilecek ‘Picker’ bileşeninin içine ‘Picker’ öğesi olarak bir öğe listesi eklememiz gerekir. Picker’da çok sayıda farklı props vardır. Bunlardan birkaçı aşağıdaki gibidir:

1. onValueChange :

Seçiciden bir öğe seçildiğinde bir geri arama verir. Seçilen öğenin değerini ve o öğenin dizinini verir. Dizin önemlidir, gerekirse dizini kullanarak farklı bir harita listesinden seçim yapabiliriz.

2. selectedValue :

Seçici öğe değerleri listelerinden biriyle eşleşmesi gereken seçilen değer.

3. enabled :

Değeri ‘false’ olarak ayarlarsak seçiciyi devre dışı bırakır.

4. mode :

Bu seçenek yalnızca Android için kullanılabilir. “dialog” veya “dropdown” olabilir. “dialog” kalıcı bir iletişim kutusu gösterir, bu varsayılan seçenektir. “dropdown” bir açılır liste görüntüler.

5. style and itemstyle :

stil “pickerStyleType” türünde olmalıdır. “picker” ye bir “style” eklemek için kullanılır. “itemStyle”, öğe etiketlerinin her birine stil uygulamak için kullanılır.

Şimdiye kadar, çoğu uygulama için gereken en yaygın kullanılan React Native UI Bileşenlerini gördük. Lütfen görüşlerinizi ve bununla ilgili sorularınızı bize bildirin.

Kaynak: https://www.opencodez.com/