React Native Props Mantığı

tarihinde gönderilmiş tarafından

React Native Props ile sayfalar arasındaki geçişlerde verileri almamızı sağlar . Navigation ile ilk sayfadan ikinci sayfaya değer taşıdığımızda props ile o taşınan değeri alırız.

Props kavramını en güzel bir örnek ile açıklayabilirim , bu işlem için öncelikle navigation tanımlamasının yapıldığını ve bir butona tıklandığında ikinci sayfaya bir değerin taşındığını ikinci örnekte ise her sayfa geçişinde Header değişimini örnek ile açıklayalım .

Öncelikle ilk sayfada bir buton olduğunu ve buton ile değeri ikinci sayfaya taşıdığımızı örnekleyelim ;

<Button onPress={()=>this.props.navigation.navigate('ikinciSayfa',{degisken:'Değişkenin içeriği'})}
>
    <Text>Tıklayınız</Text>
</Button>

ilk sayfada degisken adında bir değişken oluşturduk ve içeriğine “Değişken içeriği” yazdık “Tıklayınız” yazısına tıkladığımız anda bizi ikinciSayfa sayfasına yönlenderecek ve props.degisken içeriğinde ise “Değişken içeriği” olacak.

Bu değişkeni ikinci sayfada Text İçeriğine yazalım .

render(){
    return(
            <View>
                <Text>{this.props.state.degisken}</Text>
            </View>
        )
}

ilk örneğimiz bu kadar , şimdi ikinci örneğe geçelim yani biz tüm sayfalarımızda aynı Header kullanarak sadece Header içeriğindeki başlığın her sayfada değişmesini istiyorsak ;

değişkeni component içerisinde bir değişken olduğunu belirtmemiz gerekiyor yani ;

<OzelHeader baslik="İkinci Sayfa Başlığı" />

baslik ile bir değişken oluşturduk ve içeriğine “İkinci Sayfa Başlığı” yazdık artık bu değer import ettiğimiz sayfaya props landı bu propsu ekrana yazdırmakta yine ilk örnektekiyle aynı ;

<Header>
    <Left></Left>
    <Body><Text>{this.props.baslik}</Text></Body>
</Header>