👻

React-Native 6.3 > First Step

7 min read

環境:React-Native 0.63

久しぶりにReactNativeをゼロからやってみたらスムーズに動作しなかったのでメモ

以下に書いてある事をやってみました。

React Native · A framework for building native apps using React

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/e26e84ca-23f5-e342-78f4-85a3d9876ec8.png" width=500px />

npx react-native init MyTestApp

しばらく待つと以下のメッセージと共に完了しました。

                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          

                  Welcome to React Native!                
                 Learn once, write anywhere               

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing CocoaPods dependencies (this may take a few minutes)

  Run instructions for iOS:
    • cd "/Users/atsu/react-native/MyTestApp" && npx react-native run-ios
    - or -
    • Open MyTestApp/ios/MyTestApp.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button

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

  Run instructions for Windows and macOS:
    • See https://aka.ms/ReactNative for the latest up-to-date instructions.

iOSを実行してみます。

cd "/Users/atsu/react-native/MyTestApp"
npx react-native run-ios
error Could not find "Podfile.lock" at /Users/atsu/GitHub/react/react-native/MyTestApp/ios/Podfile.lock. Did you run "pod install" in iOS directory?
info Found Xcode project "MyTestApp.xcodeproj"
xcrun: error: unable to find utility "simctl", not a developer tool or in PATH
error Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues. Run CLI with --verbose flag for more details.
Error: Command failed: xcrun simctl list --json devices
xcrun: error: unable to find utility "simctl", not a developer tool or in PATH

おっとエラーが出ました。

cocoapods をインストール

sudo gem install cocoapods

参考:react-native run-ios で error Could not find "Podfile.lock" at のエラーが出た時の対処法 - Qiita

sudo gem install cocoapods

Fetching concurrent-ruby-1.1.7.gem
.
.
.
Fetching cocoapods-1.10.0.gem
Successfully installed concurrent-ruby-1.1.7

HEADS UP! i18n 1.1 changed fallbacks to exclude default locale.
But that may break your application.

If you are upgrading your Rails application from an older version of Rails:

Please check your Rails app for 'config.i18n.fallbacks = true'.
If you're using I18n (>= 1.1.0) and Rails (< 5.2.2), this should be
'config.i18n.fallbacks = [I18n.default_locale]'.
If not, fallbacks will be broken in your app by I18n 1.1.x.

If you are starting a NEW Rails application, you can ignore this notice.

For more info see:
https://github.com/svenfuchs/i18n/releases/tag/v1.1.0

Successfully installed i18n-1.8.5
.
.
.
Parsing documentation for cocoapods-1.10.0
Installing ri documentation for cocoapods-1.10.0
Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, nap, fuzzy_match, httpclient, algoliasearch, ffi, ethon, typhoeus, netrc, public_suffix, addressable, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-trunk, cocoapods-try, molinillo, atomos, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 30 seconds
33 gems installed

再度挑戦

npx react-native run-ios  
error Could not find "Podfile.lock" at /Users/atsu/GitHub/react/react-native/MyTestApp/ios/Podfile.lock. Did you run "pod install" in iOS directory?
info Found Xcode project "MyTestApp.xcodeproj"
xcrun: error: unable to find utility "simctl", not a developer tool or in PATH
error Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues. Run CLI with --verbose flag for more details.
Error: Command failed: xcrun simctl list --json devices
xcrun: error: unable to find utility "simctl", not a developer tool or in PATH

同じエラーが出ました。
XCodeを開くとなんらかの更新を始めました。バージョンアップ直後だったのが原因かも

同時に、xcrunもやってみます。

xcrun -k --sdk iphoneos --show-sdk-path

再度挑戦

npx react-native run-ios

info Found Xcode workspace "MyTestApp.xcworkspace"
info Building (using "xcodebuild -workspace MyTestApp.xcworkspace -configuration Debug -scheme MyTestApp -destination id=81AE3B51-0DAD-4B8B-A0BC-6EF1D2309E84")
success Successfully built the app
info Installing "/Users/atsu/Library/Developer/Xcode/DerivedData/MyTestApp-gqsuzipqiokooicvhcygoxrrlfip/Build/Products/Debug-iphonesimulator/MyTestApp.app"
info Launching "org.reactjs.native.example.MyTestApp"
success Successfully launched the app on the simulator

動きました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/d5824076-9f9f-455a-b56b-62a46d1ff47b.png" width=300px />

iPhone 実機で動作

Running On Device · React Native

MyTestApp.xcworkspaceを実行してXCODEで開きます

スクリーンショット 2020-10-24 23.05.51.png

実行ボタンを押します

スクリーンショット 2020-10-24 23.08.01.png

動きました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/b2c1b5cf-68ad-3380-0189-1dd26c6cf1b3.png" width=300px />

Discussion

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