👇🏾 💟 😧 React Native Guide-iOSアプリの作成パート1.1 ⛈️ 🦂 🤺

ここから翻訳。

ここに続きます。

JSでモバイルアプリを作成するというアイデアは新しいものではありません。 IonicやPhoneGapなどのフレームワークがこのタスクに対応しており、かなりの量の開発者を引き付けていることがわかりました。

ただし、これらのフレームワークも、モバイルJavaScriptアプリケーションを作成するというアイデアも、私を惹きつけたことはありません。 Swift / Objective-CまたはJavaを学び、実際のアプリケーションを作成してみませんか？もちろん、これにはかなりのトレーニング努力が必要になりますが、継続的なトレーニングは開発者が行っており、うまくやるべきことではありませんか？新しい言語とフレームワークをすばやく学習しますか？それではポイントは何ですか？私にとって、このようなアプローチの明らかな利点は、疑いを上回ることはありませんでした。

Chalk + Chiselの記事を読むまでは、次の点に注意を引きました。

React Nativeはちょっとした実験だと思いました。そして、実際のネイティブアプリケーションはネイティブ言語で記述する必要があると考えました。数ヶ月前に時間を巻き戻せば、Objective-CまたはSwiftのiOSで二度と書くことはないと自信を持って言えます。

なんて！あなたは...真剣にですか？

このような深刻な声明を読んで、React Nativeを試してみました。どうして？すでにReactを使用していて、気に入っています。 React NativeはReactと非常に似ているため、既にReactで開発している場合は、水中の魚のように感じるでしょう。そうでない場合、幸いなことに、Reactは非常に単純なので頭を回すことができます。

どのアプリケーションを作成しますか？

Appストアで、iPhone用の通常の壁紙検索アプリケーションを見つけることができませんでした。

デスクトップでは、 Unsplashだけですべてのニーズを満たすことができます。ただし、電話では：設定→壁紙:(

したがって、不必要な~~「Hello World！」~~カウンターを作成する他のマニュアルとは異なり、ここでは、Unsplashからランダムな写真をダウンロードし、美的に魅力的な方法で表示し、カメラロールから保存できるアプリケーションを作成します（どうやらAndroidの「ギャラリー」に類似していますが、マイフォトストリームのようなものがまだあります-翻訳者のコメント）。思ったよりこのアプリケーションが好きでした。したがって、このガイドの最後でReact Nativeに感心していなくても、壁紙を検索して保存するためのクールなアプリケーションがあります。それは素晴らしいことではありませんか？

始める前に、この時点ですでに知っているべきことをリストします。

Javascript
クラス、矢印関数、破壊、文字列パターンなどのES2015の機能（$ {name}）（ロシア語）
Mac OS Xコマンドライン（端末）
CSS（予期せず！）
React（オプション）

そしてもう1つ、私が言ったように、iOSアプリケーションを作成します。つまり、Macで作業しているということです。 Androidでは、LinuxとWindowsの両方でアプリケーションを作成できます。そして、iOSの下で-OS Xでのみ、あなたはMacOS Xで作業していることが理解されています。

発言

このチュートリアルの終わりまでに、React Nativeに精通し、アプリケーションを作成できるようになります。 Xcodeでのプロジェクトのセットアップ、サードパーティのモジュールとコンポーネントのインストール、ライブラリのインポート、flexboxを使用したアプリケーションのスタイル設定、カスタムジェスチャハンドラーの作成などを検討します。

以前にReactを使用したことがない場合は、このガイドで紹介します。これは大きな可能性を持つ新しいクールなJSライブラリであり、近い将来サポートされなくなるとは思いません。

便宜上、マニュアルは2つの部分に分かれています。各パートは5つのセクションで構成されています。各セクションでは、目標に一歩近づきます。開始した場合、各段階で一般的な概念を理解し、集中力を失わないために、開始された各セクションのタスクを完了することをお勧めします。

アプリケーションのソースコードは、GitHubリポジトリで表示できます。

1.空のReact Nativeプロジェクトを作成します

Xcodeバージョン7.0以降がインストールされていることを確認してください。 App Storeから無料でダウンロードできます。

ほとんどの場合（Web開発者であり、2016年にこれを読んだ場合）、すでにNodeがインストールされています。そうでない場合は、インストールします。インストールする別の重要なツールはnpm （ノードパッケージマネージャー-ノードのパッケージマネージャー-約Translator）です。 Nodeにはnpmがプリインストールされていますが、更新は頻繁に行われるため、更新する必要があります。指示に従ってください。

必要なのはそれだけです。ターミナルで、 npm install -g react-native-cli

ます。このコマンドは、React Nativeパッケージをグローバルにインストールします（スイッチ（-g）。これは、ノードで作成されたプロジェクトから、グローバルにインストールされたパッケージにアクセスできることを意味します。グローバルパッケージ自体は、ディレクトリにインストールされます（ウィンドウの下）... npm> node_modules-翻訳者のコメント）。

これがすべて理解できないか、手順を実行できない場合は、公式ドキュメントが役立ちます（amdプロセッサを搭載したwindow7でAndroid Studioを実行することについての私のちょっとしたメモ -約Translator）。

コマンドラインを使用してプロジェクトが保存されているフォルダーにreact-native init SplashWalls

し、ターミナルでreact-native init SplashWalls

と入力します。

このコマンドは、SplashWallsと呼ばれる新しいフォルダーにすべての必要なモジュールをロードします。

SplashWallsフォルダーの内容

React Nativeの優れた機能の1つは、JSを使用してAndroidおよびiOS用のアプリケーションを作成することです。そのほとんどは両方のアプリケーションで使用されます。 index.android.js, index.ios.js

にはindex.android.js, index.ios.js

ファイルindex.android.js, index.ios.js

2つのファイルがありindex.android.js, index.ios.js

の名前はそれ自体を表しています。特定のプラットフォーム用に開発するには、両方のプラットフォーム用に開発している場合、対応するファイル、またはその両方を変更する必要があります。

iOSアプリケーションを開発しているため、index.android.jsファイルと対応するフォルダーを削除します。 index.ios.jsファイルを使用します。このファイルは、アプリケーションを起動したときに最初に起動されます。

次に、iosフォルダーに移動して、SplashWalls.xcodeprojファイルを実行します。 Xcodeでは、次のポップアップが表示されます。

スクリーンショットに表示される「一致するプロファイルが見つかりません」という警告に注意してください。それを修正しましょう。

最初に、バンドル識別子フィールドのテキストを変更します。入力する名前が逆引きDNS通知と一致することを確認する必要があります（domain_zone.domain_name.package_name、例adobe.com> com.adobe.package-おおよその翻訳者）。この契約により、App Storeでアプリケーションを区別できます。 com.nashvail.me.tutorial.SplashWallsを使用します。

次に、リストから名前を選択します。