React Native で Hello Worldをするまで・・・

React Native で Hello Worldをするまで・・・

React Native で Hello Worldをするまで・・・

React Native で Hello Worldをするまで・・・ へのコメントはまだありません

はじめに

React Nativeを試したくなって、インストールから、あれこれしてみました。
結構苦労したので、Hello Worldを出すぐらいのところまでを、メモとして記載しておきます。

インストールは 本家のページの「Getting Started」を見ながらで大体出来るのだが・・・
Android Studio自体も初めて触ったので、ちょっと迷って、困ったのでそのへんも・・・

インストール

以下のGetting Startedに沿って始めてください。

Getting Started
https://facebook.github.io/react-native/docs/getting-started.html

手順に沿ってインストール

ページ中腹の「Starting the Android Virtual Device」のところまで、頑張って勧めてください。
Android Studioのインストール、追加でAndroid 6のモジュールをインストールするなどなど、かなり時間がかかります。(およそ30分)
(Android Studioは /opt 配下にインストールしました。)

迷ったところは、

sudo をつける必要があったところぐらいです。

ページ中腹の「Starting the Android Virtual Device」のところが、実際やったのと違って困ったので、
対処方法を記載しておきます。

rn-00

ページでは

としろと記載されていますが・・・ うまく行きません。
以下のコマンドを叩いて Android Studioを起動しましょう。

Android Studio の起動

以下のような画面が表示されます。
rn-000

新規プロジェクトを作成

Start a new Android Studio project をクリックして、適当な名前でプロジェクトを1つ作成してください。
このプロジェクトは、全く使いませんが、AVD Managerを起動する際に必要なので、とりあえず作ります。

rn-0

Android仮想マシン作成

メニューより AVD Managerを起動します。

Tool >> Android >> AVD Manager
IMG_1574

あとは画像の手順で仮想マシンを1つ作ってください。

rn-2

rn-3

rn-4

rn-5

仮想マシンを起動します。
rn-6

rn-7

JDKのインストールと設定

Javaのコンパイル環境が入ってない場合、動作しないみたいです。
既にJava環境がある場合はとばして頂いて結構です。

Googleで「jdk」をキーワードに検索してください。

「Java SE Development Kit 8 – Downloads – Oracle」

というのがトップに出てくると思うので、リンクをクリックして、
自分の環境にあった、JDKをダウンロードしてください。

JDKインストール

プロファイルを編集して、パスを通す

React Native HelloWorldプロジェクト作成

いよいよ、React Nativeプロジェクトの作成と、Hello Worldです。

デフォルトのトップページが仮想マシンに表示されたらOKです。

rn-8

index.android.js を調整

HelloWorld/index.android.js

以下の部分にHello Worldを表示する3行を追加します。

画面リフレッシュ

仮想マシンの画面をアクティブにして、キーボードで、「R」を2回押します。

rn-9

別プロジェクトを作りたくなったら

Hello Worldはとりあえず出来たので、別のプロジェクトを作りたくなった場合の説明をします。
プロジェクトの作り方は、HelloWorldの時と同じですが・・・
いざアプリを起動しようとすると、エラーが発生します。
エラーの内容は、「xxx フォルダのindex.android.jsはないよ・・・」みたいなものです。

これ、HelloWorldプロジェクトの方を見に行っててエラーになっているみたいです。
react-native start で起動したプロセスが残っているために、前に起動したプロジェクトを見に行っちゃうようですね。

古いプロセスを殺す

以下のコマンドで、プロセスを探して、killします。

もう一度、 react-native start

マシン再起動後の動作確認方法

一旦マシンを落としたあと、また、開発したくなったらどうするかという手順です。
手順というほどではありませんが、とりあえず、以下のコマンドでAndroid Studioを起動して、

メニューより AVD Managerを起動します。
Tool >> Android >> AVD Manager

で、仮想マシンを起動して、 react-native start 、 react-native run-android
でOKです。

雑感

React Nativeが難しいのではなくて、Android Studioに慣れてなくて、あれこれ戸惑いましたね。
React Native自体は、ReactJSをやったことがあれば、あまりつまづかないと思います。

React JSと違うところは、エレメントがHTMLエレメントではなくて、ReactNativeのエレメントになる。
そしてReactNativeのエレメントの使い方をある程度マスターしなきゃならない ということでしょうか。
まぁ、これはやっていけばだんだんなれることなので、努力次第でしょう。


About the author:

Related Posts

Leave a comment

Back to Top