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のモジュールをインストールするなどなど、かなり時間がかかります。（およそ３０分）
（Android Studioは /opt 配下にインストールしました。）

迷ったところは、

[bash]
npm install -g react-native-cli
[/bash]

sudo をつける必要があったところぐらいです。
[bash]
sudo npm install -g react-native-cli
[/bash]

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

ページでは
[bash]
$ android avd
[/bash]

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

Android Studio の起動

[bash]
$ /opt/android-studio/bin/studio.sh
[/bash]

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

新規プロジェクトを作成

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

Android仮想マシン作成

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

Tool >> Android >> AVD Manager

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

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

JDKのインストールと設定

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

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

「Java SE Development Kit 8 – Downloads – Oracle」

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

JDKインストール

[bash]
$ sudo mkdir /usr/java
$ sudo mv jdk-8u121-linux-x64.tar.gz /usr/java
$ sudo tar xvzf jdk-8u121-linux-x64.tar.gz

[/bash]

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

[bash]
nano ~/.bash_profile
[/bash]

[bash]
CLASSPATH=/usr/java/jdk1.8.0_121/jre/lib/rt.jar
PATH=$PATH:/usr/java/jdk1.8.0_121/bin/

export CLASSPATH PATH
[/bash]

[bash]
$ source ~/.bash_profile
[/bash]

React Native HelloWorldプロジェクト作成

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

[bash]
$ react-native init HelloWorld

$ cd HelloWorld/
$ react-native start > /dev/null 2>&1 &
$ react-native run-android
[/bash]

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

index.android.js を調整

HelloWorld/index.android.js

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

[bash]
export default class HelloWorld extends Component {
render() {
return (


Welcome to React Native!


Hello World!!


To get started, edit index.android.js


Double tap R on your keyboard to reload,{‘\n’}
Shake or press menu button for dev menu


);
}
}
[/bash]

画面リフレッシュ

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

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

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

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

古いプロセスを殺す

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

[bash]
$ ps aux |grep react-native
[/bash]

[bash]
hiro 15864 2.0 1.3 1314168 140484 pts/0 Sl 01:22 0:07 node /usr/local/bin/react-native start
hiro 17068 0.0 0.0 15256 936 pts/0 S+ 01:28 0:00 grep –color=auto react-native
[/bash]

[bash]
$ kill 15864
[/bash]

もう一度、 react-native start

[bash]
$ react-native start > /dev/null 2>&1 &
$ react-native run-android
[/bash]

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

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

[bash]
$ /opt/android-studio/bin/studio.sh
[/bash]

メニューより 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のエレメントの使い方をある程度マスターしなきゃならない　ということでしょうか。
まぁ、これはやっていけばだんだんなれることなので、努力次第でしょう。