Navigation Kütüphanesi yüklenmesi:
1-npm install –save react-navigation
2-yarn add react-native-gesture-handler
-yada npm kullanıyorsanız
– npm install –save react-native-gesture-handler
3-react-native link react-native-gesture-handler
App.js
import React from 'react'; import {createStackNavigator,createAppContainer} from 'react-navigation'; import Home from './src/Pages/Home'; import Login from './src/Pages/Login'; const navigator=createStackNavigator({//Router diyebiliriz ilk olarak login sayfasını açacaktır login:{screen:Login}, home:{screen:Home} }); export default createAppContainer(navigator);
Login.js
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View,TextInput,Button} from 'react-native'; export default class Login extends Component{ constructor(props) { super(props); this.giris_click=this.giris_click.bind(this); this.state={//runtime'de değiskenleri ve değerleri saklayan yapıdır. sayac:0 } } static navigationOptions={ title:'NavigateKullanım' }; giris_click() { this.props.navigation.navigate('home');//butona basıldığında diğer sayfa gidiyor. } render() { return ( <View style={styles.ana_view}> <TextInput style={styles.text_input} placeholder='Kullanıcı Adınız'></TextInput> <TextInput style={styles.text_input} placeholder='Şifre'></TextInput> <Button title="Giriş" style={styles.text_input} onPress={this.giris_click}></Button> <Text>{this.state.sayac}</Text> </View> ); } } const styles = StyleSheet.create({ ana_view:{ flex:1, flexDirection:'column', justifyContent:'center' }, text_input:{ marginRight:10, marginLeft:10 } });
Home.js
import React,{Component} from 'react'; import {StyleSheet,View,Button,FlatList,TextInput,Text,TouchableOpacity} from 'react-native'; class Home extends Component{ constructor(props) { super(props); this.ekle_click=this.ekle_click.bind(this); this.state={ liste:[], text_value:'', sayac:0, } } static navigationOptions={ title:'NavigateKullanım'//başlık texti }; ekle_click() { if(this.state.text_value!='') { let liste=this.state.liste; liste.push({key:this.state.sayac,value:this.state.text_value}); this.setState({liste:liste,text_value:'',sayac:(this.state.sayac+1)}); } } render() { return( <View style={style.view_style}> <View style={style.list_view_style}> <FlatList style={style.flat_style} extraData={this.state} data={this.state.liste} keyExtractor={(item)=>item.key.toString()} renderItem={({item}) => <Text style={style.flatlist_text_style}>{item.value}</Text>} /> </View> <View style={style.input_buton_view_style}> <TextInput style={style.input_style} value={this.state.text_value} onChangeText={(value)=>this.setState({text_value:value})}></TextInput> <TouchableOpacity style={style.button_style} onPress={this.ekle_click} > <Text style={style.button_text_style}>Ekle</Text> </TouchableOpacity> </View> </View> ); } } const style=StyleSheet.create({ view_style:{ flex:1, flexDirection:'column', }, list_view_style:{ flex:5 }, input_buton_view_style:{ flex:1, flexDirection:'column', position:'absolute', bottom:1, left:2, right:2 }, input_style:{ borderWidth:1, fontSize:20, borderRadius:10, height:35, } , flat_style:{ flex:5 }, button_style:{ height:35, marginTop:10, justifyContent:'center', alignItems:'center', borderRadius:10, backgroundColor:'yellow', fontFamily:'bold' }, button_text_style:{ fontSize:20, fontFamily:'bold', height:35, textAlignVertical: "center", textAlign: "center", fontWeight: '400' }, flatlist_text_style:{ height:40, fontSize:20, } }); export default Home;