This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Tech Community.
React Native for Windows を試してみたので備忘録もかねて手順をメモしてみました。
作業開始時点の私の環境は以下のようになります。
- Windows 10 Pro 1909 (設定アプリから開発者モードに変更してください)
- Visual Studio 2019 16.4.2
- Node.js v12.9.1 (注意:現時点で最新の v12.14.1 を使うとビルド時にエラーになりました)
- yarn 1.21.1
まず、セットアップを以下のページに従ってやってみましょう。
https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/ConsumingRNW.md
プロジェクトを作る
npm install -g react-native-cli を実行して入れます。今日時点では react-native-cli@2.0.1 が入りました。
このコマンドを使って React Native のプロジェクトを作ります。任意のフォルダーで以下のコマンドを実行します。
初回実行は各種パッケージのダウンロードなどが走るので時間がかかりますがコーヒーでも飲んで待ちましょう。次に、ここに React Native for Windows を入れます。ここで入れる React Native for Windows は vnext と言われる C++ で実装されたパフォーマンスのいい方になります。yarn (もしくは npm)で入れることが出来ます。
私は yarn なので、以下のコマンドで入れて React Native for Windows 関連のファイルを生成しました。
何か新バージョンの metro.config.js に置き換えるか?と聞かれたので y を選択して更新しました。
windows フォルダーがプロジェクト直下に生成されて、その中にソリューションファイルがあります。
これを開いて実行することも出来ますが、今回は Visual Studio Code で試してみたいと思います。
Visual Studio Code を管理者として実行します。(ドキュメント上には記載はないのですが、管理者モードで実行しないと私の作業環境では、アプリのインストールに失敗しています。)Visual Studio Code で ReactNativeHelloWorld フォルダーを開きます。Visual Studio Code に React Native Tools をインストールしていない場合はインストールします。
Visual Studio Code の launch.json を以下のようにして F5 を押してみましょう。
初回起動は凄く時間がかかるのでコーヒーでも飲んで時間をつぶしましょう。ビルドの進捗は Visual Studio Code の Output から React native: Run windows で確認できます。
暫くすると、以下のように Window が起動してきます。
型が欲しい
TypeScript 対応してみましょう。既存のプロジェクトに TypeScript サポートを追加する手順が以下のドキュメントにあります。
https://facebook.github.io/react-native/docs/typescript#adding-typescript-to-an-existing-project
この手順に沿って、以下のコマンドを実行していきます。
そして、tsconfig.json を以下の内容で作成します。一部ドキュメントと変えているのがテンプレートでは json ファイルを import しているので、それに対応するため resolveJsonModule を true にしています。
jest.config.js も以下の内容で追加します。
最後に、App.js と index.js を App.tsx と index.tsx にします。そうすると App.tsx で Cannot find name 'global' というエラーになります。とりあえずないものは作ればいいので、以下の定義を App.tsx の import 文の下あたりに追加します。(参考にした Issue: https://github.com/facebook/react-native/issues/26598)
ここまで出来たら再び F5 を押して実行してみます。以下のように表示されたら成功です!
補完を体験してみよう
App.tsx を以下のように変更してみましょう。
コードを書いている途中にちゃんと補完がきくことが体験できますね!(JS でも出るんでしょうけど)
うまくいっていると、アプリがリアルタイムに書き換わっていて以下のように動くはずです。
まとめ
軽く React Native for Windows を試してみましたが、環境さえ整っていれば意外と簡単に動きました。同僚の Matteo が最近以下の React Native for Windows 系の記事を書いてるので興味があったら是非チェックしてみてください。
- Getting started with React Native for Windows
- Building a React Native module for Windows
- Create a CI/CD pipeline for a React Native for Windows application
- React Native for Windows and native modules: how to add CI/CD to your project
それでは!
ソースコードは以下のリポジトリーに上げてます。
https://github.com/runceel/HelloRN4W