Bu bölümde çalışma anında yeni bir bileşeni çalışma anında (run-time) ekleyip, render aşamasında güncellemesi yapacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import React from 'react'; import { Button, StyleSheet, Text, View } from 'react-native'; import * as globalStyles from '../styles/global'; export default class App extends React.Component { constructor(props) { super(props); this.state = { things: [], key: 0 } } add = () => { const k = this.state.key + 1 const newThing = (<Text key={k}>Yeni Metin {k}</Text>); this.state.things.push(newThing) this.setState({ key: k }); } render() { const Arr = this.state.things.map((a, i) => { return <View key={i}>{ a }</View> }) return ( <View style={globalStyles.styles.container}> { Arr } {/* <Text>{this.state.key}</Text> <Text>{this.state.things.length}</Text> */} <Button onPress={this.add} title='Metin Ekle'/> </View> ); } } |
state bölümde things adında bir dizi ve kaçıncı bileşen olduğunu tutan bir değişken açtık. add fonksiyonu Button’a tıkladığında devreye girer. key değeri 1 arttırılıp bir değişkene atılır. newThing değişkeni bir Text bileşen içerir. Bu bileşen things array’ine push metodu ile eklenir. Ayrıca, ekleme işleminden sonra setState üzerinden yeni key değeri ayarlanır. render aşamasında things dizisindeki değerler map metodu ile toplanıp sonuç döndürülür. things dizisi oluşan bileşenleri tutar. render aşamasının return metodu “{ Arr }” üzerinden oluşan metinleri gösterir.