【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に不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。