React Native Navigation ile Sayfalama

Uygulamalarınızda sayfa geçişi istiyor veya en azından uygulama içerisinde 2 sayfa varsa mutlaka react-navigation kullanmak zorundasınız. Kısaca kendi kullandığım kodu paylaşıcam.

Bir çok özellik mevcut ancak her birine değinmek mümkün değil tamamen ihtiyaca bağlı dökümandan kullanmak doğrusu olacaktır.

Projelerimim neredeyse tamamı bu düzenle ilerlemektedir.

import React from "react";
import { Transition } from 'react-native-reanimated';
import { createAppContainer } from 'react-navigation';
import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';


import girisScreen from '../screen/Giris';



const AppNavigator = createAnimatedSwitchNavigator(
  {

    Giris: {
      screen: girisScreen
    },


  },
  {
    // The previous screen will slide to the bottom while the next screen will fade in
    transition: (
      <Transition.Together>
        <Transition.Out
          type="fade"
          durationMs={400}
          interpolation="easeIn"
        />
        <Transition.In type="fade" durationMs={500} />
      </Transition.Together>
    ),
  }

);

export default createAppContainer(AppNavigator);

import React from "react";

import { Transition } from 'react-native-reanimated';

import { createAppContainer } from 'react-navigation';

import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';

import girisScreen from '../screen/Giris';

const AppNavigator = createAnimatedSwitchNavigator(

{

Giris: {

screen: girisScreen

{

// The previous screen will slide to the bottom while the next screen will fade in

transition: (

<Transition.Together>

<Transition.Out

type="fade"

durationMs={400}

interpolation="easeIn"

<Transition.In type="fade" durationMs={500} />

</Transition.Together>

}

);

export default createAppContainer(AppNavigator);

React Native Navigation ile Sayfalama

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et