脱expo-cli react native の環境構築👷

背景

• expo-cli 経由で react-native のアプリを作成するとバージョンが古い
  • https://reactnative.dev/docs/environment-setup
• react-native のバージョンが 5.0.1 で 使用されている react-nativeが 0.64.3 と古め
  • 2021/12/07現在は 0.66.3
• ↑に伴って、デバッガー回りでエラーが出てエミュレーターがうまいこと言ってくれない
  • https://github.com/facebook/react-native/issues/32197#issuecomment-926869783

環境

$ npx react-native info
info Fetching system and libraries information...
System:
    OS: Linux 5.14 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 49.42 GB / 62.18 GB
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.18.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
    Watchman: 20211205.130157.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.3 => 0.64.3 
  npmGlobalPackages:
    *react-native*: Not Found

環境構築

• androidの環境を予め用意しておいている前提で書いております。参考
• また、iOSの動作確認はできておりませんので、悪しからす。

react-native コマンドの導入

react-native-cli は非推奨になったようなので、インストールされている方は削除してください

$ yarn global add react-native
$ react-native --version
6.3.0

プロジェクトの作成

• 今回はtypescriptで作成したかったのでテンプレートを指定

$ react-native init myReactNativeApp --template react-native-template-typescript
                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          

                  Welcome to React Native!                
                 Learn once, write anywhere               

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies

  
  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "myReactNativeApp" && npx react-native run-android

動作確認

$ yarn start

• 先に yarn start しておかないとコケるので注意

$ yarn android

🎉🎉🎉🎉