[ReactNative] スクロールで上に隠れたりするHeaderの実装

2024/11/24に公開

完成系

上スクロールでヘッダーを隠し、下スクロールでヘッダーを出現させます。
スクロール量に応じて、ヘッダーの出現量が変わります。

使用ライブラリ

react-native-header-arupaka-r

非ネイティブモジュールのライブラリーなので、Expo GOで実行可能です。

https://github.com/SR-123456789/react-native-header-arupaka-r

インストール

yarn add react-native-header-arupaka-r

もしくは

npm install react-native-header-arupaka-r

使用方法

冒頭の動画のソース
画面全体をArupakaHeaderViewで囲って使用する。

import { Text } from 'react-native';
import { ArupakaHeaderView } from 'react-native-header-arupaka-r';
const App = () => {
  return (
    <ArupakaHeaderView
      showBackButton
      headerTitleColor="white"
      backBottomColor="white"
      headerTitle={'header'}
      headerColor="green"
      isGradientAnimated={true}
    >
      <Text>ここに中身を書く</Text>
    </ArupakaHeaderView>
  );
};

代表的なPropsの説明

デフォルトHeaderのカスタマイズ方法

Props名 効果
headerTitle ヘッダーの中央の文字 String
headerTitleColor ヘッダーの文字色 String
headerColor ヘッダーの色 String
showBackButton 戻るボタンの有無 Boolean
onClickBackButton 戻るボタンを押した時のcallBack ():void=>{}

Discussion