React Native学習01-Macプラットフォーム上でiOS開発環境を構築
3665 ワード
最近React Nativeの技術は比較的に火がついて、React NativeはFacebookが発表した1つのオープンソースフレームワーク(Githubアドレス)で、私の知っている限りでは携程のAPPはReact Nativeを使って開発して、しかも携程の技術チームはReact Nativeに関する本を専門に出しました
確かにReact NativeはHTML 5よりも性能が良く、オリジナルiOSよりも柔軟です.
私はReact Native公式サイトからゼロベースでReact Nativeを学び、常に自分の学習成果と心得を記録し、皆さんに共有しています.
Let’s get started!
基本的な基本から始め、MacプラットフォームにiOS開発環境を構築します(他のプラットフォームについては公式サイトでご覧ください)
一、Macプラットフォーム上にiOS-React Native開発環境を構築する
1.ホームブリッジのインストール
Homebrew、私たちはそれを端末のAppStoreと理解することができて、私たちは端末でいくつかのコマンドを叩くことでアプリケーションをインストールすることができて、しかも速度はAppStoreに対して速くてHomebrewの配置について少数派の1篇の文章《Homebrew Caskを借りて、あなたに急速にMac Appの新しい姿勢をインストールすることを教えます》を見ることができます
2.ノードをインストールする.js
(1)homebrewを使用してNodeをインストールできます.jsは端末の下で直接以下のコマンドを打ち込む
(2)私たちも直接公式サイトに行ってNodeをダウンロードすることができます.jsクリックインストール公式サイトアドレス:https://nodejs.org/en/ダウンロードするときは最新バージョンをダウンロードしたほうがいいです.
3.React Nativeのコマンドラインツール(react-native-cli)
React Nativeのコマンドラインツールは、プロジェクトの作成、初期化、更新、パッケージングサービスの実行などのタスクを実行するために使用されます.
公式サイトの意味で
ここで、基本的な環境はすでに構築が完了しています.私たちは最初のReactNativeプロジェクトの作成を開始することができます.次の4-6はお勧めのツールです.私たちのより良い開発を助けることができます.ステップに従って操作することもできます.直接スキップすることもできます.7から始めます.
インストールを推奨するツール
4.Watchman
WatchmanはFacebookが提供するファイルシステムの変更を監視するツールです.このツールをインストールすると、開発時のパフォーマンスが向上します(packagerはファイルの変化を迅速に捉え、リアルタイムでリフレッシュできます).
5.Flow
Flowは静的JSタイプチェックツールです.注:多くの例で見られる奇妙な疑問符や、メソッドパラメータのタイプのような書き方は、このflowツールの構文に属しています.この文法はES規格ではなく、Facebook独自のコード仕様です.だから初心者は直接スキップすることができます(つまり、このツールをインストールする必要はありません.flow関連文法を勉強するのに苦労することもお勧めしません).
6.Nuclide
Nuclide(このリンクには科学的なインターネットが必要)は、Facebookが提供するatomベースの統合開発環境であり、React Nativeアプリケーションの作成、実行、デバッグに使用できます.
ここをクリックしてNuclideの入門ドキュメントを読みます.
注意:React Nativeアプリケーションを記述するには、WebStormまたはSublime Textを使用することをお勧めします.
私もSublime Textツールが好きです.
7.テストインストール
8.修正項目
プロジェクトの実行に成功しました.変更を試みることができます.
9.以上の過程で発生する可能性のある問題
(1)次のような問題に遭遇した場合
Warning: You are using OS X 10.12. We do not provide support for this pre-release version. You may encounter build failures or other breakages. Please create pull-requests instead of filing issues.
あなたはきっと私と同じように、最新版のmacOS Sierra Beta版システムをインストールしたと思います.その後、私は別のOS X EI Capitanパソコンで構成に成功しました.お手元にパソコンが1台しかない場合は、以下のチュートリアルを参考にして、システムのダウングレード「macOS Sierra公測版アップグレードとダウングレードチュートリアル」を行うことができます.
(2)もし皆さんが端末でノードをインストールしているなら.jsの时、ダウンロードはずっと100%までできなくて、みんなは公式サイトに行って直接インストールパッケージをダウンロードしてインストールすることをお勧めします
Study React Native With Me!
確かにReact NativeはHTML 5よりも性能が良く、オリジナルiOSよりも柔軟です.
私はReact Native公式サイトからゼロベースでReact Nativeを学び、常に自分の学習成果と心得を記録し、皆さんに共有しています.
Let’s get started!
基本的な基本から始め、MacプラットフォームにiOS開発環境を構築します(他のプラットフォームについては公式サイトでご覧ください)
一、Macプラットフォーム上にiOS-React Native開発環境を構築する
1.ホームブリッジのインストール
Homebrew、私たちはそれを端末のAppStoreと理解することができて、私たちは端末でいくつかのコマンドを叩くことでアプリケーションをインストールすることができて、しかも速度はAppStoreに対して速くてHomebrewの配置について少数派の1篇の文章《Homebrew Caskを借りて、あなたに急速にMac Appの新しい姿勢をインストールすることを教えます》を見ることができます
2.ノードをインストールする.js
(1)homebrewを使用してNodeをインストールできます.jsは端末の下で直接以下のコマンドを打ち込む
$brew install node
(2)私たちも直接公式サイトに行ってNodeをダウンロードすることができます.jsクリックインストール公式サイトアドレス:https://nodejs.org/en/ダウンロードするときは最新バージョンをダウンロードしたほうがいいです.
3.React Nativeのコマンドラインツール(react-native-cli)
React Nativeのコマンドラインツールは、プロジェクトの作成、初期化、更新、パッケージングサービスの実行などのタスクを実行するために使用されます.
$npm install -g react-native-cli
公式サイトの意味で
EACCES: permission denied
のような権限報告が間違っているのを見たら、上記のhomebrew訳注を参照して、/usr/localディレクトリの所有権を修復してください:(私は出会ったことがありません)$sudo chown -R `whoami` /usr/local
ここで、基本的な環境はすでに構築が完了しています.私たちは最初のReactNativeプロジェクトの作成を開始することができます.次の4-6はお勧めのツールです.私たちのより良い開発を助けることができます.ステップに従って操作することもできます.直接スキップすることもできます.7から始めます.
インストールを推奨するツール
4.Watchman
WatchmanはFacebookが提供するファイルシステムの変更を監視するツールです.このツールをインストールすると、開発時のパフォーマンスが向上します(packagerはファイルの変化を迅速に捉え、リアルタイムでリフレッシュできます).
$brew install watchman
5.Flow
Flowは静的JSタイプチェックツールです.注:多くの例で見られる奇妙な疑問符や、メソッドパラメータのタイプのような書き方は、このflowツールの構文に属しています.この文法はES規格ではなく、Facebook独自のコード仕様です.だから初心者は直接スキップすることができます(つまり、このツールをインストールする必要はありません.flow関連文法を勉強するのに苦労することもお勧めしません).
$brew install flow
6.Nuclide
Nuclide(このリンクには科学的なインターネットが必要)は、Facebookが提供するatomベースの統合開発環境であり、React Nativeアプリケーションの作成、実行、デバッグに使用できます.
ここをクリックしてNuclideの入門ドキュメントを読みます.
注意:React Nativeアプリケーションを記述するには、WebStormまたはSublime Textを使用することをお勧めします.
私もSublime Textツールが好きです.
7.テストインストール
$react-native init AwesomeProject
$cd AwesomeProject
$react-native run-ios
8.修正項目
プロジェクトの実行に成功しました.変更を試みることができます.
Sublime Text
でindex.ios.js
を開き、何行かを勝手に変更します.iOS Simulatorで□-Rを押すとアプリが更新され、最新の変更が表示されます.9.以上の過程で発生する可能性のある問題
(1)次のような問題に遭遇した場合
Warning: You are using OS X 10.12. We do not provide support for this pre-release version. You may encounter build failures or other breakages. Please create pull-requests instead of filing issues.
あなたはきっと私と同じように、最新版のmacOS Sierra Beta版システムをインストールしたと思います.その後、私は別のOS X EI Capitanパソコンで構成に成功しました.お手元にパソコンが1台しかない場合は、以下のチュートリアルを参考にして、システムのダウングレード「macOS Sierra公測版アップグレードとダウングレードチュートリアル」を行うことができます.
(2)もし皆さんが端末でノードをインストールしているなら.jsの时、ダウンロードはずっと100%までできなくて、みんなは公式サイトに行って直接インストールパッケージをダウンロードしてインストールすることをお勧めします
Study React Native With Me!