import React, {Component} from 'react'; import {TextInput, StyleSheet, Text, View,TouchableOpacity} from 'react-native'; export default class App extends Component { constructor(props) { super(props)//Component clasının yapılandırıcısını çağrıyoruz. this.state={//runtime'de değiskenleri ve içindeki verileri saklıyor text_input_value:'', sayac:0, text_value:'', }; this.normal_btn_click=this.normal_btn_click.bind(this); this.btn_text_degistir=this.btn_text_degistir.bind(this); } btn_text_degistir() { this.setState({text_value:this.state.text_input_value,text_input_value:''}); } normal_btn_click() { this.setState({sayac:++this.state.sayac}); } render() { return ( <View style={styles.main_view_style}> <View style={styles.view_1_style}> <Text style={styles.label_style} >{this.state.text_value}</Text> <TextInput placeholder='bir seyler giriniz..' value={this.state.text_input_value} style={styles.textinput_style} onChangeText={(value)=>{ //isimsiz fonksiyon this.setState({text_input_value:value}); //state içinde ki değiskenleri this.setState fonksiyonu ile güncelliyoruz. }}> </TextInput> <TouchableOpacity style={styles.btn_goster_style} onPress={this.btn_text_degistir}> <Text style={styles.btn_goster_text_style}>Text'de Göster</Text> </TouchableOpacity> </View> <View style={styles.view_2_style}> <TouchableOpacity style={styles.btn_normal_sayac_style} onPress={this.normal_btn_click}> <Text style={styles.btn_normal_sayac_text_style}>Normal Buton Arttır</Text> </TouchableOpacity> <TouchableOpacity style={styles.btn_arrow_sayac_style} onPress={()=>this.setState({sayac:++this.state.sayac})}> <Text style={styles.btn_arrow_sayac_text_style}>Arrow Buton Arttır</Text> </TouchableOpacity> <Text style={styles.label_style}>{this.state.sayac}</Text> </View> </View> ); } } const styles = StyleSheet.create({ main_view_style: { flex: 1,//ekranı kapla flexDirection:'column',//nesneler yukardan aşağı dizilecektir backgroundColor: 'white', }, view_1_style:{ flex:1, alignItems:'center'//yatayda ortala }, view_2_style:{ flex:1, flexDirection:'column', alignItems:'center' }, btn_goster_style:{ height:35, width:'99%', marginLeft:1, marginRight:1, backgroundColor:'red', borderRadius:10, marginTop:1, },btn_goster_text_style:{ height:'100%', textAlign:'center', textAlignVertical:'center', color:'white', }, textinput_style:{ height:35, width:'99%', marginLeft:1, marginRight:1, borderRadius:10, borderWidth:1, borderColor:'#e5e5e5', marginTop:1, }, label_style:{ height:35, width:'99%', marginLeft:1, marginRight:1, borderRadius:10, borderWidth:1, borderColor:'#e5e5e5', marginTop:1, textAlignVertical:'center', paddingLeft:2, color:'black' }, btn_normal_sayac_style:{ height:35, width:'99%', marginLeft:1, marginRight:1, backgroundColor:'#ffa959', borderRadius:10, marginTop:1, }, btn_normal_sayac_text_style:{ height:'100%', textAlign:'center', textAlignVertical:'center', color:'white', },btn_arrow_sayac_style:{ height:35, width:'99%', marginLeft:1, marginRight:1, backgroundColor:'#75baff', borderRadius:10, marginTop:1, }, btn_arrow_sayac_text_style:{ height:'100%', textAlign:'center', textAlignVertical:'center', color:'white', }, });