・2 min read
React NativeでYouTubeクローンを作る海外動画を2022年に動かすまで
この記事はなにか？
YouTubeのクローンをReact Nativeで書くYouTube動画を見つけた。Let's Build the YouTube App with REACT NATIVE for Beginners
ビギナーがモチベを高めるためにとてもいいと感じたが、クローンして動かしてみると動かなかった。これを動かすまで数時間格闘したのでその軌跡をメモしておく。
前提、動作確認した環境
iOS15.5上で動かしたExpo Go(v2.24.3)
Node.js: v14.18.1
Yarn: v1.22.15
Expo CLI: 4.12.10
私の手元のExpo Go動かなかったところ
0. (React Nativeは関係ないが)aws-exports.jsを配置。
/src/aws-exports.jsを用意する。これは動画を参照されたい。
1. Expo SDKのバージョンとExpo Goのバージョンがあってない。
ソースコードのpackage.jsonを見ると
"expo": "~41.0.1",となっているが、2022年7月現在Expo Goで動かせるのはExpo SDK 43以上のようだ。2. PickerがReact Nativeからなくなったとのエラーが出る。
結論この解決策は
aws-amplify-react-nativeのバージョンを上げる。
5.0.2だったのをaws-amplify-react-native@6.0.1に上げると動いた。React Nativeは、バージョンが上がるにしたがって、おおもとのReactNativeライブラリから子機能を別ライブラリに切り出していっている。aws-amplify-react-nativeは古いライブラリとの依存関係があり、これが原因のようだ。
3. なぜか動かない。
「
Missing package "metro/src/lib/attachWebsocketServer"」というエラーが出てなぜか動かない、、。
これは解決策わからず、node_modulesをディレクトリごと削除したり、yarn.lockを削除(キケン！)したりしてからyarn install→expo start --tunnelReact Nativeのツラミ
なーんかバージョン地獄になる、。React Nativeのツラミなのか、モバイルのツラミなのか？Flutterとか触ってみたい。
