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;