React Native Render Problem
React native ile uygulama geliştirirken karşılaşabileceğiniz ve insanın sabrını zorluyabilecek bir bug dan bahsetmek istiyorum aslında bug olmayabilir önlem yada kullanım ile ilgili bir durum olabilir ancak bir sorun olarak karşımıza çıkıyor.
Sorundan bahsedecek olursak bu sorun ile butona tıkladığınızda ekranda bulunan bir <Text> içeriğini değiştirmek isteyebilirsiniz bu işlemi gerçekleştirmek için uygulamanız gereken yöntem
this.state.textYazisi= 'Yeni gelecek olan içerik';
yukarıdaki şekilde kullanmanız durumunda butona bastığınızda text içeriği değişmeyecektir, uygulama üzerinden bahsedersek
import React from 'react'; import {View, Text,TouchableOpacity} from 'react-native'; export default class App extends Component{ constructor(props){ super(props); this.state({ degisecekDeger:'', }) } _yaziyiDegistir(){ this.state.degisecekDeger='Yeni Değer'; } render(){ return( <View> <TouchableOpacity onPress={ ()=>this._yaziyiDegistir() } > <Text>{this.state.degisecekDeger}</Text> </TouchableOpacity> </View> ) } }
yukarıdaki şekilde kullanım gerçekleştirirseniz butonun üstündeki text değişmeyecektir, işlem gerçekleşecek değerler atanacak ancak ekranda bu sonucu göremeyeceksiniz, bu kullanım yalnış bir yöntemdir, doğrusu ise this.setState() kullanmaktır, doğrusundan bahsedersek ;
import React from 'react'; import {View, Text,TouchableOpacity} from 'react-native'; export default class App extends Component{ constructor(props){ super(props); this.state({ degisecekDeger:'', }) } _yaziyiDegistir(){ this.setState({ degisecekDeger:'Yeni Değer', }) } render(){ return( <View> <TouchableOpacity onPress={ ()=>this._yaziyiDegistir() } > <Text>{this.state.degisecekDeger}</Text> </TouchableOpacity> </View> ) } }