ReactNativeでMapとCarouselのスワイプに連動するアニメーションの実現方法

はてなブックマーク - ReactNativeでMapとCarouselのスワイプに連動するアニメーションの実現方法
LINEで送る
Pocket

今、ある案件のコンサルティングでReactNative GoogleMapとCarousel連動するアニメーションの実現する必要が出ています。

今日はその方法を解説していきたいと思います。

 

 

 

プログラムの修正

今回はこちらのソースコードを少し改造した

https://github.com/browniefed/map_animated_scrollview

その上、下記のライブラリーを使用することにします。

https://github.com/archriss/react-native-snap-carousel

 

修正まえのプログラム(Before)

 

修正後のプログラム(After)

こんなイメージで実現したいですね。

こちらとなります!

Imageは、https://github.com/browniefed/map_animated_scrollview のものそのまま利用します。

 

今回一番重要なのはこの部分ですね。

さらにポイントになっているのは

 

まとめ

いかがですか?それっぽくなっていますね。

もちろん、これは完成形ではなく、もっと色々チューニングする必要があります。

また、サーバーのデータを動的に連動して、場所の情報を取ってきて表示したりすることも可能です。

ご不明点等がありましたら、TwitterでもDMをください。

では Happy Coding!

 

はてなブックマーク - ReactNativeでMapとCarouselのスワイプに連動するアニメーションの実現方法
LINEで送る
Pocket

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close