react-native-visionos でつくるVisionOS向けアプリの初期構成

前回より callstack/react-native-visionos 向けアプリについて研究をはじめた。今回もその続き。初期ディレクトリの構成についてメモ。

callstack/react-native-visionos は React Native を fork して作られているので、初期状態のディレクトリ構成も似ている。一部 VisionOS 向けビルドに必要なファイルが追加されていたり、変更されていたりする。

ちなみに、前回は以下。

• Vision Pro 向けアプリを react-native-visionos で作ってあそぶ (0) - よりひろい フロントエンド

まずは Hello　World　的な画面が表示されるところまでたどりついた。プロジェクト作成には以下のコマンドを使った。

$ npx @callstack/react-native-visionos@latest init MyHello

現在、以下のようなファイル群が生成されている。

.
├── .bundle
├── .eslintrc.js
├── .prettierrc.js
├── .watchmanconfig
├── App.tsx
├── Gemfile
├── README.md
├── __tests__/
├── android/
├── app.json
├── babel.config.js
├── index.js
├── ios/
├── jest.config.js
├── metro.config.js
├── package-lock.json
├── package.json
├── tsconfig.json
├── vendor/
└── visionos/

各ファイルおよびディレクトリについて

前述のディレクトリについて、各役割などを書いてみる。書いていく途中でいくつか今後深掘りしてみたいライブラリなどに出会った。ということでトップページの右カラムにある Links of Interest にいくつか追加した。

• .bundle
• .eslintrc.js
• .prettierrc.js
• .watchmanconfig
• App.tsx
• Gemfile
• __tests__
• android や ios
• app.json
• babel.config.js
• index.js
• jest.config.js
• metro.config.js
• package.json
• tsconfig.json
• vendor
• visionos

といったところで、今回はおわり。次回よりいよいよ UI コンポーネントをいじっていく。