Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
React Native

【React Native】Drawer navigationの実装

どうも、とがみんです。

この記事では、React navigationを用いたドロワーナビゲーションの実装についてまとめていきます。

今回作成するもの

今回は以下のような、左画面をスライドすると、各ページへ画面遷移できるようなテーブルが出てくるものを作成します。

Drawer navigationの実装

必要なパッケージのインストールについて

以下のコマンドをターミナルで実行し、必要なライブラリをインストールします。

yarn add @react-navigation/native
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-screens
yarn add react-native-safe-area-context
yarn add @react-native-community/masked-view

今回は「Drawer navigation」を実装するため、上記に加えて以下を実行します。

yarn add @react-navigation/drawer

インストールが完了すれば、 package.jsonファイルにインストールしたパッケージ名が追加されます。

各スクリーンのプログラムについて

ドロワーナビゲーション機能について

まとめ

React Nativeにおけるドロワーナビゲーションについて実装しました。
コードは以下GitHubに上げているのでよければ参考にしてください。

https://github.com/togamin/DrawerNavSample

参考

Drawer navigation|React Navigation