react-nativeにて、スライドによる条件変化によりビューを変化させるには。

Question

webサイトでよく見かけるビューの変化の話ですが、

上にスワイプして下にスクロールするときに、上のヘッダー部分を隠す、トップに戻ったら隠した部分を出現させる、
という機能をアプリではあまり見かけません。
このような機能をアプリに実装するのは難しいのでしょうか？

ScrollViewにて、スクロールされたという情報を受け取るのはpropsで行うのでしょうか？

また、横スクロールにより、タブを変更するという機能も見かけますが、
この機能と先ほどの機能は同じロジックで管理できるのでしょうか？

Answer 1

上にスワイプして下にスクロールするときに、上のヘッダー部分を隠す、トップに戻ったら隠した部分を出現させる、
という機能をアプリではあまり見かけません。
このような機能をアプリに実装するのは難しいのでしょうか？

↓が参考になるかと思います

https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e

ちなみにあまり見かけない理由ですが、 header をタップすると一番上まで戻るという機能が OS 標準でついているので、スマホアプリで header を隠すのはそういったお約束を破る、ということになります。
驚き最小の原則で header を隠さないようにしているのではないかと思います。

ScrollViewにて、スクロールされたという情報を受け取るのはpropsで行うのでしょうか？

onScroll にハンドラーを登録して検知するという形になります

https://facebook.github.io/react-native/docs/scrollview.html#onscroll

また、横スクロールにより、タブを変更するという機能も見かけますが、
この機能と先ほどの機能は同じロジックで管理できるのでしょうか？

react-navigation など、ナビゲーション系のパッケージがサポートしているジェスチャーで処理する形になります。

Comments

[MOTOMUR]

> react-navigation など、ナビゲーション系のパッケージがサポートしているジェスチャーで処理する形になります。

とのことですが、現在自分のプロジェクトはreact-router-nativeにて行なっておりますので、たぶんパッケージを頼れません。

onScrollにて前後のステートに変化させて、stateにて描画処理を分けるといった方法での記述は不可能でしょうか？
onScrollの説明を読まずに聞いているので、onScrollにてベクトルを受け取れるのであれば可能かなと思ったのですが、どうでしょうか？

[januswel]

react-router-native は gesture サポートがないようですね…

複数回のイベント取得が必要ですが、前回のハンドラー動作時より今回のハンドラー動作時の y 座標が大きいか小さいかで方向は判別可能です
つまりスクロール可能な方向に関してのみ向きがわかることになります

他にはジェスチャーのイベントをハンドリングする方法があります
次を参考にしてみてください

https://facebook.github.io/react-native/docs/gesture-responder-system.html
https://www.npmjs.com/package/react-native-swipe-gestures

[MOTOMUR]

onScrollの方挑戦してみました。
自分のやりたいのは、ヘッダーではなく、プロフィールコンテンツのスクロールによるhideだったのですが、この記事（https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e）の最後の部分が自分のやりたいことと違い、苦戦しております。

イメージを質問文にて改めさせていただきますが、構図を簡単に説明しますと、上にヘッダーがあり、プロフィールのコンテンツがあり、タブがあり、そのユーザーの投稿があります。スクロールすると、プロフィールを畳んで、ヘッダーとタブ以下を表示したいのですが、scrollY: new Animated.Value(0)にて、stateの中身を参照して、三項演算にて描画処理わけは可能なのでしょうか？（中身がわからないので質問です。）

opacityの設定は記事通りでも良いと思います。
（opacityにてコンテンツを透明にさせられたかは不確かな記憶ですが・・・）。

コード的には
{
this.state.~~ === ???
?<></>
:<></>
}

このように表現できるのがベストなのですが、可能でしょうか？

gestureについてはもう少し理解に時間がかかりそうです。

[januswel]

> 上にヘッダーがあり、プロフィールのコンテンツがあり、タブがあり、そのユーザーの投稿があります。スクロールすると、プロフィールを畳んで、ヘッダーとタブ以下を表示したい

であれば件の URL のアニメーションを、スクロール量に応じてプロフィール欄の height を 0 にするように変更してやれば実現可能ですね

アニメーションについては次がわかりやすいです

https://speakerdeck.com/nolick1219/introduction-to-react-native-animated
https://facebook.github.io/react-native/docs/animations.html#animated-api

[MOTOMUR]

こんにちは。
onScrollにてコーディングをしていたのですが、困った点がありまして、
質問文掲載のタブにあたる部分のみが、スクロール可能になり、他の部分のスクロールが不可能になってしまいました。
https://github.com/MOTOMUR/plz_donation/blob/master/iOS/views/MyPage.js
このようなコーディング状況です。
どうしてこのようにスクロールが一部限定になってしまうのでしょうか？