Expo routerライブラリの使用方法について①

Next.jsについては全く知識がないところからスタートです。

まず、公式ドキュメントどおりにしてみると、TypeScriptで、フレームワークっぽく、フォルダが作成される。

公式ドキュメント：

しかし、JavaScript　で作成したい場合どうするか？

この中で、.jsのファイルのみで作成しても可能との記載あります。

このYoutube動画のようにするとJavaScript でも作成できます。

今後以下のように作成していくこととします。

npx create-expo-app -t

選択画面では、Blankを選択。

npx expo uninstall expo

npx expo install expo@49.0.18

npx expo install --fix

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

package.json内の"main"の項目を公式ドキュメント通りに置き換えます。エントリーポイントを変更してます。

{
  "name": "expo-router-tutorial2",
  "version": "1.0.0",
  "main": "expo-router/entry",
 
｝

app.json内で、”slug”下に、"scheme"項目を追加します（今回のプロジェクト名はexpo-router-tutorial2）

{
  "expo": {
    "name": "expo-router-tutorial2",
    "slug": "expo-router-tutorial2",
    "scheme": "expo-router-tutorial2",

babel.config.js内のreturn内に、plugins項目を追加します。

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
  };
};

npx expo start -c

でOK。

JavaScriptを使用する場合は自分でappフォルダから作成していく必要があります。