05.06. Diğer Bileşenler

Temel bileşenler, sıklıkla kullanılırken diğer bileşenler belirli uygulamalar için kullanışlı olabilir. Bu bölüm diğer bileşenler arasında öne çıkan bileşenlere ayrılmıştır. Bu bölümde tanıtılan bileşenler hem Android hem de iOS platformlarında çalışır.

Bileşen / API	Açıklaması
ActivityIndicator	Dairesel bir yükleme göstergesi görüntüler.
Alert	Belirtilen başlık ve mesaj ile bir uyarı iletişim kutusu başlatır.
Animation	Oluşturulması ve bakımı kolay, akıcı, güçlü animasyonlar oluşturmak için bir kütüphanedir.
CameraRoll	Yerel kamera uygulamasına / galerisine erişim sağlar.
Clipboard	Hem iOS hem de Android’deki panodan içerik kopyalamak ve yapıştırmak için bir arayüz sağlar.
Dimensions	Cihaz boyutlarını almak için bir arayüz sağlar.
KeyboardAvoidingView	Sanal klavyenin yolundan otomatik olarak çıkan bir görünüm sağlar.
Linking	Hem gelen hem de giden uygulama bağlantılarıyla etkileşime geçmek için genel bir arayüz sağlar.
Modal	İçerik üzerinden bir görünüm sunmanın basit bir yolunu sağlar.
PixelRatio	Cihazın piksel yoğunluğuna erişim sağlar.
RefreshControl	Bu bileşen, işlevselliği yenilemek için bir ScrollView içinde kullanılır.
StatusBar	Uygulama durum çubuğunu kontrol etmek için bileşendir.
WebView	Web içeriğini yerel görünümde sunan bir bileşendir.

Yeni Reac Native versiyonları ile birlikte bazı bileşenler önemini yitirirken bazı bileşenler daha ön plana çıkmaktadır. Daha fazla bileşen için React Native web sitesini kontrol etmenizi öneririm. Özellikle internette bir probleme çözüm ararken bir de React Native sitesine bakmanızda yarar vardır. Çünkü, internetteki çözümler eski versiyonlara uygun olabilmektedir.

Bir alert örneği ile bu bölümü bitirelim. Alert üzerinden üç button olsun, iki button metin değiştirirken üçüncü button hem metin değiştirsin hem de alert bileşenini silsin.

import React, { Component } from 'react';
import {Text, View, Alert, Button } from 'react-native';
import * as globalStyles from '../styles/global';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
          sonuc: '"Alert kapatılsın mı?"',
          button_visible: true
        };      
    }

    _degistir01 = () => {
        this.setState({sonuc: '"Daha sonra sor" seçildi. "Alert kapatılsın mı?"'})
    }

    _onPressButton = () =>{
        Alert.alert(
            'Merhaba Alert',
            'Alert işlemini kabul ediyor musunuz!',
            [
              {text: 'Daha sonra sor', onPress: this._degistir01},
              {
                text: 'Vazgeç',
                onPress: () => this.setState({sonuc: 'Vazgeç" seçildi. "Alert kapatılsın mı?"'}),
                style: 'cancel',
              },
              {text: 'Tamam', onPress: () => this.setState({sonuc: 'Kapatıldı, R+R yapıp tekrar başlatın.', button_visible:false})},
            ],
            {cancelable: false},
        )
     }
    
    render() {
        if (this.state.button_visible){
            return (
                <View style={globalStyles.styles.container}>
                    <Button
                      onPress={this._onPressButton}
                      title="Alert Göster"
                    />
                    <Text>{this.state.sonuc}</Text>
                </View>
              );
        }
        else
        {
            return (
                <View style={globalStyles.styles.container}>
                    <Text>{this.state.sonuc}</Text>
                </View>
              );
        }
        
    }
}

import React, { Component } from 'react';

import {Text, View, Alert, Button } from 'react-native';

import * as globalStyles from '../styles/global';

export default class App extends Component {

constructor(props) {

super(props);

this.state = {

sonuc: '"Alert kapatılsın mı?"',

button_visible: true

};

}

_degistir01 = () => {

this.setState({sonuc: '"Daha sonra sor" seçildi. "Alert kapatılsın mı?"'})

}

_onPressButton = () =>{

Alert.alert(

'Merhaba Alert',

'Alert işlemini kabul ediyor musunuz!',

[

{text: 'Daha sonra sor', onPress: this._degistir01},

{

text: 'Vazgeç',

onPress: () => this.setState({sonuc: 'Vazgeç" seçildi. "Alert kapatılsın mı?"'}),

style: 'cancel',

{text: 'Tamam', onPress: () => this.setState({sonuc: 'Kapatıldı, R+R yapıp tekrar başlatın.', button_visible:false})},

{cancelable: false},

)

}

render() {

if (this.state.button_visible){

return (

<Button

onPress={this._onPressButton}

title="Alert Göster"

<Text>{this.state.sonuc}</Text>

</View>

);

}

else

{

return (

<Text>{this.state.sonuc}</Text>

</View>

);

}

constructor iki state metni göstermek için sonuc değişeni ve alert button görünürlüğü için button_visible değişkeni tanımladık. _onPressButton Alert API’si çağrıyor. Alert.alert fonksiyonu aşağıdaki parametreleri içeren static bir fonksiyondur.

static alert(title, message?, buttons?, options?, type?)

1	static alert(title, message?, buttons?, options?, type?)

title mecburi ile diğer parametreleri seçimliktir. Yukarıdaki örnekte Message bölümünü ekledikten sonra 3 Button oluşturduk. “Daha sonra sor” metnine sahip button _degistir01 fonksiyonunu çağırır. Ancak bu fonksiyonları direkt bu bölümde tanımlayabiliriz. “Vazgeç” metnine sahip button onPress işlemini direkt bir arrow fonksiyonu üzerinden alır. Kodun okunurluğunu arttırmak için 1. button’daki gibi ayrı bir işlem düşünebilirsiniz. Basit işlemler içinde direkt arrow fonksiyonu üzerinde bağlama işlemini düşünebilirsiniz. “Tamam” metnine sahip button ise button_visible değerini de değiştirir. render aşamasında button_visible true ise farklı component seti eğer false ise farklı bir component seti döndürülür. Bu sayede button görselliği engellenmiş olur.

Diğer bileşen ve API’ler üzerinden uygulamalar yapıp özelliklerini öğrenmenizi öneririm.