【ReactNative開発】フェードしながら画面遷移させる方法

こんばんは。今晩もReactNativeと終わらない戦いを繰り広げております。

今日は、画面遷移でフェードさせる方法について調べてみました。

前提

• React Native
• Expo
• TypeScript
• React Navigation

フェードしながら画面遷移させる方法

調べたら、こちらのStack Overflowで紹介されていました。

https://stackoverflow.com/questions/62772066/stack-navigator-fade-transition-between-stack-screens-in-react-native

アプリコードだとこんな感じ。

  const forFade = ({ current }) => ({
    cardStyle: {
      opacity: current.progress,
    },
  });


const registrationStack=createStackNavigator();

・・・
    <xxxStack.Navigator 
　　　　　　　　　　　　・・・・
      screenOptions={{
        headerShown: false,
        cardStyleInterpolator: forFade,★
     }}

何だこの記述の仕方は・・・と思ってもう少し追いかけてみたら、React Navigationの公式ページでも紹介されているやり方だった。

https://reactnavigation.org/docs/stack-navigator/#animations

結構ちゃんと解説されていたので、詳細はこちらをご確認ください！

とりあえず、フェード画面遷移ができるようになったので、今日はここまで。

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。