React Native for Windows を試してみたので備忘録もかねて手順をメモしてみました。
作業開始時点の私の環境は以下のようになります。
まず、セットアップを以下のページに従ってやってみましょう。
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 フォルダーがプロジェクト直下に生成されて、その中にソリューションファイルがあります。
これを開いて実行することも出来ますが、今回は 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 で確認できます。
暫くすると、以下のように Window が起動してきます。
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 を押して実行してみます。以下のように表示されたら成功です!
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 でも出るんでしょうけど)
うまくいっていると、アプリがリアルタイムに書き換わっていて以下のように動くはずです。
軽く React Native for Windows を試してみましたが、環境さえ整っていれば意外と簡単に動きました。同僚の Matteo が最近以下の React Native for Windows 系の記事を書いてるので興味があったら是非チェックしてみてください。
それでは!
ソースコードは以下のリポジトリーに上げてます。
https://github.com/runceel/HelloRN4W
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.