🏗️

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

2021/12/07に公開

背景

環境

$ 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

環境構築

react-native コマンドの導入

$ 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

🎉🎉🎉🎉

Discussion

ログインするとコメントできます