Microsoft

React Native for Windows を試してみたので備忘録もかねて手順をメモしてみました。

作業開始時点の私の環境は以下のようになります。

  • Windows 10 Pro 1909 (設定アプリから開発者モードに変更してください)
  • Visual Studio 2019 16.4.2
    • ユニバーサル Windows プラットフォームワークロードの C++(v141) ユニバーサル Windows プラットフォーム ツール。デフォルトでチェックが入っていないので入れる。142 じゃなくて 141 なので注意
    • 個別のコンポーネントから MSVC v141 - VS 2017 C++ ARM ビルドツール(v14.16)MSVC v141 - VS 2017 C++ x64/x86 ビルド ツール (v14/16) の 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 init ReactNativeHelloWorld --version 0.60.6

 

 


初回実行は各種パッケージのダウンロードなどが走るので時間がかかりますがコーヒーでも飲んで待ちましょう。次に、ここに React Native for Windows を入れます。ここで入れる React Native for Windows は vnext と言われる C++ で実装されたパフォーマンスのいい方になります。yarn (もしくは npm)で入れることが出来ます。

私は yarn なので、以下のコマンドで入れて React Native for Windows 関連のファイルを生成しました。

 

 

yarn add rnpm-plugin-windows
react-native windows --template vnext

 

 


何か新バージョンの metro.config.js に置き換えるか?と聞かれたので y を選択して更新しました。

 

 

Do you want to keep your metro.config.js or replace it with the latest version?
If you ever made any changes to this file, you'll probably want to keep it.
You can see the new version here: C:\Users\k_ota\Documents\Repos\runceel\ReactNativeHelloWorld\node_modules\react-native-windows\local-cli\generator-windows\templates\metro.config.js
Do you want to replace metro.config.js? Answer y to replace, n to keep your version:
y

 

 

 

windows フォルダーがプロジェクト直下に生成されて、その中にソリューションファイルがあります。

clipboard_image_0.png

これを開いて実行することも出来ますが、今回は Visual Studio Code で試してみたいと思います。

Visual Studio Code を管理者として実行します。(ドキュメント上には記載はないのですが、管理者モードで実行しないと私の作業環境では、アプリのインストールに失敗しています。)Visual Studio Code で ReactNativeHelloWorld フォルダーを開きます。Visual Studio Code に React Native Tools をインストールしていない場合はインストールします。

 

Visual Studio Code の launch.json を以下のようにして F5 を押してみましょう。

 

 

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

 

 

 

初回起動は凄く時間がかかるのでコーヒーでも飲んで時間をつぶしましょう。ビルドの進捗は Visual Studio Code の Output から React native: Run windows で確認できます。

clipboard_image_0.png

暫くすると、以下のように Window が起動してきます。

clipboard_image_1.png

 

型が欲しい

TypeScript 対応してみましょう。既存のプロジェクトに TypeScript サポートを追加する手順が以下のドキュメントにあります。

https://facebook.github.io/react-native/docs/typescript#adding-typescript-to-an-existing-project

この手順に沿って、以下のコマンドを実行していきます。

 

 

yarn add typescript @types/jest @types/react @types/react-native @types/react-test-renderer

 

 


そして、tsconfig.json を以下の内容で作成します。一部ドキュメントと変えているのがテンプレートでは json ファイルを import しているので、それに対応するため resolveJsonModule を true にしています。

 

 

{
    "compilerOptions": {
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "isolatedModules": true,
      "jsx": "react",
      "lib": ["es6"],
      "moduleResolution": "node",
      "noEmit": true,
      "strict": true,
      "target": "esnext",
      "resolveJsonModule": true
    },
    "exclude": [
      "node_modules",
      "babel.config.js",
      "metro.config.js",
      "jest.config.js"
    ]
  }

 

 

 

jest.config.js も以下の内容で追加します。

 

 

module.exports = {
    preset: 'react-native',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

 

 

 

最後に、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)

 

 

declare var global: {HermesInternal: null | {}};

 

 


ここまで出来たら再び F5 を押して実行してみます。以下のように表示されたら成功です!

clipboard_image_0.png

 

補完を体験してみよう

App.tsx を以下のように変更してみましょう。

 

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment, useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Button,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

declare var global: {HermesInternal: null | {}};

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          <View style={styles.body}>
            <Text style={styles.sectionTitle}>
              The counter value is {count}.
            </Text>
            <Button onPress={() => setCount(count + 1)} title="Increment" />
          </View>
        </ScrollView>
      </SafeAreaView>
    </Fragment>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

 

 

 

コードを書いている途中にちゃんと補完がきくことが体験できますね!(JS でも出るんでしょうけど)

clipboard_image_1.png

うまくいっていると、アプリがリアルタイムに書き換わっていて以下のように動くはずです。

rn4w.gif

まとめ

軽く React Native for Windows を試してみましたが、環境さえ整っていれば意外と簡単に動きました。同僚の Matteo が最近以下の React Native for Windows 系の記事を書いてるので興味があったら是非チェックしてみてください。

それでは!

ソースコードは以下のリポジトリーに上げてます。

https://github.com/runceel/HelloRN4W