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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React,{Component} from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, TextInput, StatusBar, TouchableOpacity } from 'react-native'; export default class App extends Component { constructor() { super(); this.state ={ text:'', data:[] } } handleSave = () => { const {text,data} = this.state; data.push({text}); this.setState({data:data,text:''}) }; render(){ const {text,data} =this.state return ( <View style={[{flex:1,paddingTop:60,}]}> <View style={style.title}> <Text style={style.title_text}>To-Do Application</Text> </View> <View style={{backgroundColor:'#ccc',padding:10,flexDirection:'row'}}> <TextInput style={style.input} value={text} onChangeText={(text)=>this.setState({text:text})} /> <TouchableOpacity onPress={this.handleSave} style={style.button}> <Text style={style.title_text}>Ekle</Text> </TouchableOpacity> </View> <View> {data.map((item) => { return <Text>{item.text}</Text> }) } </View> </View> ) } } const style = StyleSheet.create({ title:{padding:10,backgroundColor:'green'}, title_text:{color:'white',textAlign:'center',fontSize:16,fontWeight:'700'}, input:{padding: 10,backgroundColor: 'white',flex:1}, button:{padding:10,backgroundColor:'gray',borderRadius:5,marginLeft:10} }); |