業務でReactNativeに強くなる必要があったので環境構築からメモ

いちいちググったりしなくていいようにここ見れば解決するような記事のつもり

画面のキャプチャなどは載せない予定

expoを使うと依存関係などまとめてくれるから楽らしい

expoはじめて使った感想としては、
・ライブプレビューすげえ！！
・(AndroidStudioと比較して)QRコード読み込むだけで(expoアプリのインストールは必要かな？)実機プレビューできんのヤバすぎでしょ！！
・各所での説明が初心者に優しいな

コード書き始めるまでにやったこと

まずはwindowsで環境構築した手順のメモ

expo

GetStartWithExpo
に従う
以降は従ってやったこと

Node.js

まずはNode.jsをインストール

インストーラーの指示の通りでOK

Node.jsインストール後

cmdで
npm install expo-cli --global
を実行

プロジェクト作成したいディレクトリに移動し、
expo init my-new-project
my-new-projectはそのままプロジェクト名になるので任意の名前に変更可能

プロジェクト作成後

プロジェクトのディレクトリに移動
cd my-new-project
し、
npm start

ここはやってみた感じ
expo start
の方がいいかもしれない
この
expo start
はライブプレビュー起動するコマンドなので、作業するたび実行する必要があるコマンドかと

ここでエラー発生

エラーメッセージは、
Metro 'Bundler' process exited with code 1

stackoverflowを参照。

プロジェクト内の\node_modules\metro-config\src\defaults\blacklist.js
の

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

を

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

に書き換えることで解決。

個人的にはエスケープシーケンスあたりが関係していそうかな、と思った。

これで初期環境構築はできた

ここからはApp.jsを中心にゴリゴリにコード書いていく

初期構築から2〜3時間触ってみた感想

(どの言語、フレームワークでも当たり前のことかもしれないけど、)公式ドキュメント読み込まなきゃ
特に、ググって出てくる情報が少ないような気がする
レイアウトなど、スタイルの考え方はCSSの考え方が使えそう
React Nativeで使うスタイル記述は、CSSの記述をケバブケースからキャメルケースに直したものっぽい
いままで使ってきたPythonみたいなスクリプト言語とは作りが違うので、慣れるのに時間がかかりそう
特にコンポーネントの考え方とかは頭リセットして考えないとこんがらがりそう

この後は画面遷移中心に、がっつりアプリの形を作っていくので、react-navigationを含めて勉強していきます

React Native ことはじめ