React Native for macOS
MicrosoftがReact NativeをフォークしてパッチをあてたReact Native for Windowsに加えて、 React Native for macOSをGitHubで公開しました。
Get Started with macOSの手順でスケルトンアプリと、 rssreaderの2つを動かしてみました。
React Native for macOSでmacアプリを起動させる
すでにReact Nativeの開発環境が整っていれば、簡単にアプリを起動させることができます。
Get Started with macOS を読みながら進めます。
環境
| Tools | バージョン |
|---|---|
| macOS Catalina | 10.15.4 |
| Xcode | 11.4.1 |
| node | 12.14.1 |
| npx | 6.14.2 |
| yarn | 1.21.1 |
| pod | 1.9.1 |
| watchman | 4.9.0 |
react-native init でプロジェクトを作成
今回は RNMacosSample というプロジェクトで進めます。
npx react-native init RNMacosSample --version 0.61.5
エラーなく終了し、最後に以下の表示が出れば成功です。RNMacosSample ディレクトリが作成されます。
% npx react-native init RNMacosSample --version 0.61.5
This will walk you through creating a new React Native project in /Users/shoken/git/sample
Using yarn v1.22.4
Installing react-native@0.61.5...
# ----省略----
✨ Done in 9.44s.
info Installing required CocoaPods dependencies
Run instructions for iOS:
• cd "/Users/shoken/git/RNMacosSample" && npx react-native run-ios
- or -
• Open RNMacosSample/ios/RNMacosSample.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/shoken/git/RNMacosSample" && npx react-native run-android
macOS extension をインストール
プロジェクトディレクトリに移動して、 macOS用のライブラリをインストールします。同時にPodもインストールされます。
cd RNMacosSample
npx react-native-macos-init
エラーなく終了し、最後に以下の表示が出れば成功です。
% npx react-native-macos-init
npx: installed 114 in 6.575s
Reading application name from package.json...
Reading react-native version from node_modules...
Reading react-native version from node_modules...
# ----省略----
Generating Pods project
Integrating client project
[!] Please close any current Xcode sessions and use `RNMacosSample.xcworkspace` for this project from now on.
Pod installation complete! There are 29 dependencies from the Podfile and 26 total pods installed.
Run instructions for macOS:
• npx react-native run-macos
- or -
• Open macos/RNMacosSample.xcworkspace in Xcode or run "xed -b macos"
• yarn start:macos
• Hit the Run button
react-native run-macos でアプリを起動
npx react-native run-macos
React Nativeアプリと同様に、Terminalの別ウィンドウでMetro Bundlerが起動して、 RNMacosSampleアプリが起動したら成功です！
rssreaderアプリを起動させる
次に、リポジトリにPull Requestが送られているrssreaderを動かしてみます。
リポジトリをclone
git clone git@github.com:qmatteoq/react-native-windows-samples.git
rssreaderディレクトリに移動
cd react-native-windows-samples/samples/rssreader
rssreaderアプリを起動
yarn install
cd macos && pod install && cd ..
npx react-native run-macos
起動しました！
公開予定のReact Native for macOSの公式ブログ記事
リポジトリに5月更新のブログドラフト記事がPull Requestで送られていたので近日中に公開されそうです。
React Native for macOS, and more!
注意: 公式ドキュメント通りに進めるとエラー
2020年5月17日時点で、公式ドキュメントのGet Started with macOSにあるコマンドでは一部エラーになります。
一番最初の Install React Native for macOS に記載されている npx react-native init <projectName> --version 0.61 を実行するとエラーになります。
% npx react-native init sampleProject --version 0.61
This will walk you through creating a new React Native project in /Users/shoken/git/sample
Using yarn v1.22.4
Installing 0.61...
yarn add v1.22.4
info No lockfile found.
[1/4] 🔍 Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/0.61: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/shoken/git/sample/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Error: Command failed: yarn add 0.61 --exact
at checkExecSyncError (child_process.js:621:11)
at execSync (child_process.js:657:15)
at run (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:294:5)
at createProject (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:249:3)
at init (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:200:5)
at Object.<anonymous> (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:153:7)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 1725,
stdout: null,
stderr: null
}
Command `yarn add 0.61 --exact` failed.
バージョン指定にパッチバージョンまで指定すると成功します。
- npx react-native init <projectName> --version 0.61
+ npx react-native init <projectName> --version 0.61.5
上記修正はPull Request 出したので、マージ待ちです。
追記: マージされました。