👻
React-Native 6.3 > First Step
環境：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で開きます
実行ボタンを押します
動きました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/b2c1b5cf-68ad-3380-0189-1dd26c6cf1b3.png" width=300px />
Discussion