React Native ことはじめ
業務で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みたいなスクリプト言語とは作りが違うので、慣れるのに時間がかかりそう
特にコンポーネントの考え方とかは頭リセットして考えないとこんがらがりそう
(どの言語、フレームワークでも当たり前のことかもしれないけど、)公式ドキュメント読み込まなきゃ
特に、ググって出てくる情報が少ないような気がする
レイアウトなど、スタイルの考え方はCSSの考え方が使えそう
React Nativeで使うスタイル記述は、CSSの記述をケバブケースからキャメルケースに直したものっぽい
いままで使ってきたPythonみたいなスクリプト言語とは作りが違うので、慣れるのに時間がかかりそう
特にコンポーネントの考え方とかは頭リセットして考えないとこんがらがりそう
この後は画面遷移中心に、がっつりアプリの形を作っていくので、react-navigationを含めて勉強していきます
Author And Source
この問題について(React Native ことはじめ), 我々は、より多くの情報をここで見つけました https://qiita.com/kobayu0902/items/f66c37f3641c408e8fd3著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .