React Native・Expoをさわってみる
from 2024/09/08
綾坂こと.icon
React Native・Expoをさわってみる
理由 : holorhysmをアプリストアに投げたいけど、他言語を学ぶのはちょっと……
環境構築をやってみよう
まずReactがわからない
なんならNode.jsも触ったことない
えっと、とりあえず入れればいい?
検索したらこの記事が出てきたので従おうの気持ち
nvmってのを使ってインストールすればいいんですかね
bsahd.icon
インストーラーかポータブルか選ぶ
nvmは知らない
pipはインタプリタごとにインストールされるが、
npmはpackage.jsonのある場所のnode_modulesにインストールされる
インストール前にnpm initが必須かも
実はインストール先はまだ理解していない
重要 .gitignoreに追加
確認したら.gitignore自動生成されててすごい綾坂こと.icon
グローバルインストールはおすすめしない
おっと、まずいか?綾坂こと.icon
あーなんか怒られてる臭い
code:terminal
┌───────────────────────────────────────────────────────────────────────────┐
│ │
│ The global expo-cli package has been deprecated. │
│ │
│ The new Expo CLI is now bundled in your project in the expo package. │
│ Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421. │
│ │
│ To use the local CLI instead (recommended in SDK 46 and higher), run: │
│ › npx expo <command> │
│ │
└───────────────────────────────────────────────────────────────────────────┘
神がいる、ありがとうございます!!綾坂こと.icon
Expoのアカウントを登録しろ ←はい
した
Expo Goを検証端末に入れろ ←はい
入れた
Expo CLIを入れろ ←はい
なんか点字つかってぐるぐるやっててすごい
なんか入ったっぽい(おい)
雛形を作れ ←はい(従順)
なんかできてる
yarn startをすると、 package.jsonに記述されている、expo startコマンドが実行されます。
yarn……????
調べた
npmと互換性がある = 同じpackage.jsonが使える
……npm start……?
なんか出た!!
code:terminal
Error: EMFILE: too many open files, watch
at FSEvent.FSWatcher._handle.onchange (node:internal/fs/watchers:207:21)
なんて???????
さっき無視したエラーを読むか……
これを読めと
うーんわからん
yarnを入れたほうがいいんじゃないか?
いyarn~bsahd.icon
なんかエラーは消えた
Open up App.js to start working on your app!って出てる
これVS Codeのターミナルでやっていいな?
あ!!これ変更できるのか!!(App.jsを開いた)
GitHubのリポジトリと連携させたい
これはやるだけ
Google Pixel 6a・無印iPad・M2 Macbook Airで開けた!
これはすごい
で、ここからどうするんや
App.jsでなんかすればいいのはわかるが、記法がわからん
このHTMLXMLっぽいものにはなにが使えるんですか?
Reactのドキュメントを読みます
なんかこのXMLっぽいものを返す関数の名前を、そのままタグの名前に使えるってこと?
あ、普通のHTMLタグも使えるんですか?
画面遷移を実装したい
holorhysm ver0.5.1のコードからタグもスタイルもほぼ移植すれば良さそう(直感)
だめだった
Render Error : Text strings must be rendered within a <Text> component.
ほえ〜