React Native for macOS でサンプルアプリを動かす

10749 ワード
react-native reactnative Microsoft Mac React Mac テキストリンク

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 [email protected]...
# ----省略----
✨  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 [email protected]: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 出したので、マージ待ちです。

追記: マージされました。