TopPageに、クイズアプリ画面へ行くボタンと、検索画面へ行くボタンを配置する。
その前に、最近、React NavigationがVersion6になり、少し記載方法が変更になっている点に留意する必要がある。今回は、Version5でやっていきます。
下記のように準備する。
⓵expo 50⇒49へダウン
npx expo uninstall expo
npx expo install expo@49.0.18
②React Navigationを導入
npx expo install @react-navigation/stack@5 @react-navigation/native@5
関連ライブラリも入れる必要あり
npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
⓷babel.config.jsに、下記追加(追加したものを掲載)
さて、準備はおわりました。
現在のファイル構成は下記
デザインは無しで骨格だけ作成してみます。
この用語がどのように問題で出ているか調べたい時がありますが、それが実現できてますね。
その他の拡張例:
検索画面のテキスト入力のところはコンボボックスに変更したい。
画像のある問題を作成
解答説明にYouTube動画
2023 年のクイック スタート React ネイティブ ドロップダウン ライブラリ (youtube.com)