拡張性のあるクイズアプリ(+検索画面)の作成⓵

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に、下記追加(追加したものを掲載)

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

 

さて、準備はおわりました。

現在のファイル構成は下記

デザインは無しで骨格だけ作成してみます。

 

 

 

 



 

この用語がどのように問題で出ているか調べたい時がありますが、それが実現できてますね。

その他の拡張例:

検索画面のテキスト入力のところはコンボボックスに変更したい。

画像のある問題を作成

解答説明にYouTube動画

 

2023 年のクイック スタート React ネイティブ ドロップダウン ライブラリ (youtube.com)