はじめに
どうもこんにちは、torihaziです
今日はスマホアプリを作ってみたい
=> てことは ReactNative?
=>調べたらExpo
ということでそれを使ったものをやっていきたいと思います。
ただよくわからんので例の如く、公式チュートリアルをやっていこうと思います。
ReactNativeの公式
You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to manage native files.
公式から引用してきました。
ReactNative使ってアプリ作れんこともないけど、Expoとかのフレームワーク使うことを薦めるで！
ていうことらしいので潔くそれに従います。
他の人有料級の資料
Expo プロジェクトを作成｜Expo で始める React Native 開発
この人のをみてみた。
ただexpoの公式チュートリアルやっていたので結局公式を覗く。
Expoの公式チュートリアル
1章
Create your first app - Expo Documentation
Prerequisites We'll need the following to get started: Expo Go installed on a physical device Node.js (LTS version) installed VS Code or any other preferred code editor or IDE installed A macOS, Linux, or Windows (PowerShell and WSL2) with a terminal window open The tutorial assumes that you are familiar with TypeScript and React. If you are not familiar with them, check out the TypeScript Handbook and React's official tutorial.
前提条件は
- expo go ていうアプリを入れてね
- Node.jsのLTS versionを入れてね。(長期安定版てことかね)
- vscodeとか入れてね( 今回は cursorで)
- terminal立ち上げられるようにしてね。
- TypeScriptとReactはわかっておいてね
らしい。
initialize app から適当に
そうそう、expogoのアプリは iosでやりました。
アカウント作ったらあとは今のところそれ以上しなくて良さそう。
唯一の欠点はgithub認証使えないの？てことくらい。
terminalでcreate-expo-appらしい
なった。
次。
assetsをdownload
コピーして。
npm run reset-projectをするらしい。
の後にnpx expo startするとQRコード含んだ出力がされるのでまずは wを押して web版を見てみる。
次はQRコード使ったアプリの方(expo go)
ほーいけた。
次は？
Edit the index screenらしい。
cssはjsのobjectらしい。めんどくさ。tailwindとか使えないのかな。
とりあえず言われた通りにやってみる。
Let's modify app/index.tsx screen:
- Import StyleSheet from react-native and create a styles object to define our custom styles.
- Add a styles.container.backgroundColor property to
with the value of #25292e. This changes the background color. - Replace the default value of
with "Home screen". - Add a styles.text.color property to
with the value of #fff (white) to change the text color.
web
アプリ
web版はすぐに反映されたけどアプリ版は terminal上で r押してreloadしないと反映されないっぽい。
ということで次の章
2章
ナビゲーションをやる。
なんかapp routerに近しいようなルーティングだと思った。
Link使って、色々やっている。
Stackってなんなんだろう。
とりあえず画面遷移するようにはなった。
ただ遷移先のブラウザバック？の導線はなんでここに書かれるのか、それはどう書いたらこうなるのかがわからない。
今のところはほぼ写経に近い。
続いて、not-foundページの作成
expoはアプリクラッシュした時とかurlないものを表示させようとしたら検知してここに飛ばすらしい。
これもapp routerに近い。
ただ名前が+not-found。
できた。
記入した状態でなぜか下記エラーが出たのでこれで解決した。
'React' は UMD グローバルを参照していますが、現在のファイルはモジュールです。 #TypeScript - Qiita
次はなんかアプリの下側によくあるボタンナビゲーションのやり方らしい
サブディレクトリの作り方が(tabs)という名前のディレクトリ名で作るらしい。
app routerやんけ。
でけたでけた。よくあるUIだ😆
web版
アプリ
ちょっと修正して。。。。。
web版
アプリ
github の PR github.com
次〜。
とその前に、スマホで開発ツールみたいなのどう出せばいいかわからんかったけど、
なんかスマホ振ったら出てきた😆
そんな仕様あったんや
3章
アプリの顔を作るらしい。メイン画面。
画像を扱うために何か入れるそうな。
npx expo install expo-image
それ使ってImageコンポーネントを使えるようにするらしい。
色々やって、なんかできた。
Buttonもあるらしくて、onClickだったものがonPressになってる。
web
ボタン押したら
ほー、でなんかpropsつけてより属性をつけていく感じか。
React作ってる感じとやっぱ似てるわ。
オシャンになった。
web
4章
スマホの画像ギャラリーから画像を撮ってくるための仕組みを実現するために
expo-image-pickerとかいうものを入れるらしい。
開発サーバとめて、
npx expo install expo-image-picker
とかやれば。。。
propsはいつもと同じ感じでやればよくて、
onPressに関数渡して。
おー画像選択する画面出てきた。
アプリ版の方も無事機能してる。
プライベートの写真しかないから写真は載っけられないけど。
でも公式みたいにはなった。
現状としてはボタン押したら画像選択のやつが出てきて
トリミングはまだできないけど、元の画像を拡大縮小させることで
指定の枠に収めて画像を少し加工するところまでは勝手にやってくれるみたい。
リロードされると消えてしまうけど、まぁまぁいいでしょう😆
5章
ここからmodalを作るみたい。
ここでもuseStateを使うらしい。
なんかでけた。
なるへそ、画像選択するボタンを押して、
成功したらemoji-modalみたいなのを出すのか。
なんか出たな。アプリ版でも出た。
絵文字選択後に位置は固定だが、選択したものの画像が出力された。
というか今思ったけど、divとかpとかspanとか全く出てこんな。
ViewとかTextとかしか。
6章
ユーザのインタラクティブな操作を受け付けるために必要なコンポーネントがあるらしい。
きのう途中体調崩したから、今日はここから。
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
こいつら、使っておけば、タップして動かせたり、大きくできたりできた。
ただ複雑なアルゴリズムというより
決まったやり方のような感じを受けた。
雰囲気は掴めた。
7章
今度はthird-partyのライブラリを使ってスクショを撮ってそれをデバイスに記録するようなライブラリを使うらしい
npx expo install react-native-view-shot expo-media-library
ok。
なんかデバイスの画像ライブラリにアクセスするためのライブラリがもうすでにあるらしい。
で決まった使い方のもとやればいける。
意外と単純。
ライブラリってすごいのう。
8章
今度はスクショだけど、環境が違うものへの対応をするらしい。
androidとかiosは同じだけどブラウザは違う機構だから、
その対応をするみたい。
npm install dom-to-image
なんか出た。
Fix dom-to-image TypeScript module error We need to add a type definition after importing the domtoimage library since we're using TypeScript. We can do this by creating a file types.d.ts in the root of our project directory and adding the declaration statement:types.d.ts declare module 'dom-to-image';
ただ公式の言う通り直した。
Handle platform differences - Expo Documentation
ok、いけた。
ダウンロードも行けたわ。
あ、この章これだけか。
次が最後だー。
9章
今回は何をやるんだろう。
なんかアイコンだけだったみたい。
終わりに
最後はあっけなかった。
とりあえずほぼコードは書いてなく、コピーだけですました。
雰囲気掴むこととやり切ることだけに焦点を置いてやった。
触ってみた感じ、作り方は触ってきたReactと似ている。
ただcssが jsのobjectで書いたり、
divとかspanがなくて全てViewとかTextとかコンポーネントだけで完結させていたり、
それなりに違うところがあった、、かなくらいだった。
最後にReactNativeも学習したらより分かりますよと言う書きっぷりだったので
このあとはReactNativeも少し触って行けたらいいなと思う。
プロジェクトの立ち上げ方、Expo goの使い方もなんとなくはわかったので
最初の一歩はうまくできたと思う。
ただこういうチュートリアル系やってみて思ったが、写経はしていいが、
コードは書くべきじゃないなと思った。
雰囲気を掴むことに徹する、これに尽きると思う。
多分、書いてたら、「だる」って言って辞めてた・
何はともあれやり切れたし、雰囲気掴めたし万々歳。
と言うことで次はReactNative。
完成リポジトリはこちら。
