04.05. Gelişmiş Boyutlandırma

Web dünyasında, bir cihazın ekran genişliğini ve yüksekliğini algılayarak, o cihaz için özel CSS kuralları kullanılabilir. @media aracılığıyla bu yönetim yapılır ve işin güzel tarafı bootstrap gibi hazır duyarlı tasarım desteği olan CSS kütüphaneleri vardır. Ne yazık ki, Reac Native CSS’de olan @media özelliğine benzeyen bir özellik barındırmaz. Ancak, bir kaç yerleşik kullanışlı bileşene sahiptir. Bu bölümde, rotate işlemine cevap verebilen bir örnek yapılacaktır.

Biraz styling konusu dışına çıkacağız ve uygulamanın Layout değişimi olayını yakalayacağız. Örneğin,

export default class App extends Component < Props > {
  constructor(props) {
    super(props);
    this.state = { width: 0,
    height: 0
    };  
  this.onLayoutChange = this.onLayoutChange.bind(this);
  }

  onLayoutChange(event) {
    const { width, height } = event.nativeEvent.layout; this.setState({ width, height });
  }
       
  render() {
    return(
      <View onLayout={this.onLayoutChange} style={styles.container}>
      <Text style={styles.text}>Genişlik: {this.state.width}, Yükseklik:{this.state.height}</Text>
      </View>
    );   
    }
  }

  const styles = StyleSheet.create({ 
    container: {flex: 1,alignItems: 'center', justifyContent: 'center'},
    text: { fontSize: 18}
    });

export default class App extends Component < Props > {

constructor(props) {

super(props);

this.state = { width: 0,

height: 0

};

this.onLayoutChange = this.onLayoutChange.bind(this);

}

onLayoutChange(event) {

const { width, height } = event.nativeEvent.layout; this.setState({ width, height });

}

render() {

return(

<Text style={styles.text}>Genişlik: {this.state.width}, Yükseklik:{this.state.height}</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {flex: 1,alignItems: 'center', justifyContent: 'center'},

text: { fontSize: 18}

});

Nesne ilk oluşurken width ve height değerleri 0 olarak ayarlanır. Ayrıca, onLayoutChange olayını onLayoutChange(event) fonksiyona atanır. Bu sayede, bu fonksiyon width ve height değerlerini günceller. View bileşeninin onLayout olayına fonksiyon bağlanır.

Emulatorünüzü açıp rotate işlemi yapın ve sonuçları kontrol edin.