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;

 

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',
  },
});