【完成！！】ReactNativeで映画検索アプリを作ろう！#5ドロワー設定/TV番組API編

---

どうも！ロックシステムのコジです！
Youtubeでお送りしているReactNativeを使った「映画検索アプリ開発」も5回目！今回で遂に完成です！！

前回までに、主要な映画一覧や検索の機能は終わっています。
今回はよりアプリらしくするために以下を行っていきます！
①ページ切り替えに使うドロワーの設定
②映画だけじゃなくTV番組も見れるようにしちゃう
③アプリのアイコン設定
ドロワーを設定して、映画、TV番組に切り替えられるようにします！
ReactNativeの復習、ポートフォリオ制作に是非チャレンジしてみてください！！

■過去回はこちら
＃1環境設定と画面を作ろう編
＃2APIを使って映画一覧画面を作ろう編
＃3ライブラリを使って画面遷移編＃4コンポーネント化と検索機能をつくる！編

今回使用したコードた参考リンクはこちら

▼完成コード▼

---

00:50　React Navigationサイト
https://reactnavigation.org/

---

00:55　Drawer navigation
https://reactnavigation.org/docs/drawer-based-navigation/

---

01:02　Drawer navigationインストールコマンド

expo install @react-navigation/drawer

expo install react-native-gesture-handler react-native-reanimated

---

01:19　babel.config.jsに記載するプラグイン用コード

plugins:['react-native-reanimated/plugin']

---

02:31 Drawerに割り当てたstyle

drawerActiveTintColor 　… ドロワー内のアクティブなアイテムのアイコンとラベルの色
drawerInactiveTintColor … ドロワー内の非アクティブなアイテムのアイコンとラベルの色
drawerLabelStyle　　　　… ラベルに適用するスタイルオブジェクト
drawerStyle　　　　　　 … ドロワーに適応するスタイルオブジェクト

---

02:50　映画のアイコン
https://icons.expo.fyi/Ionicons/film-outline

---

04:18　テレビ番組のアイコン
https://icons.expo.fyi/Ionicons/tv

---

05:56～ TV番組のAPI
https://developers.themoviedb.org/3/tv/get-tv-on-the-air
https://developers.themoviedb.org/3/tv/get-popular-tv-shows
https://developers.themoviedb.org/3/tv/get-top-rated-tv
https://developers.themoviedb.org/3/search/search-tv-shows

---

08:23　アイコンに設定した画像(好きな画像に変えてもOK！)
https://drive.google.com/drive/folders/1vMUMBLTo_cqN2P_qntM3A1bXGwKQJnvw?usp=sharing