✨
[ReactNative] スクロールで上に隠れたりするHeaderの実装
完成系
上スクロールでヘッダーを隠し、下スクロールでヘッダーを出現させます。
スクロール量に応じて、ヘッダーの出現量が変わります。
使用ライブラリ
react-native-header-arupaka-r
非ネイティブモジュールのライブラリーなので、Expo GOで実行可能です。
インストール
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