【React Native】AndroidアプリでHello Worldしてみた

2020年4月10日2020年9月23日

はじめに
環境構築
チュートリアル
- Androidのエミュレータを起動
Hello Worldやってみる
まとめ

はじめに

お世話になります、hosochinです

さて、今回は
React NativeでHello World
してみた話です

と言いつつ環境構築でめちゃめちゃハマりました！
それでは紹介していきます

環境構築

公式ドキュメントで丁寧に説明されていたのでこれ見ながらやりました（OSはwindows）
ざっくり言うと、

AndroidStudioのインストール
npmのインストール
react-native-cliをインストール

です

チュートリアル

プロジェクト作成→動作確認までやっていこうと思います

React Nativeのプロジェクトをセットアップします

react-native init AwesomeProject

作成したプロジェクトを実行します

react-native run-android

エラーになりました・・・、以下のようなエラーが出てきました

Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

ちょっと調べてみたら、どうやら react-native run-android を実行するまえにAndroidのエミュレータを起動しておかなければいけないっぽいです（iOSは大丈夫らしい）

Androidのエミュレータを起動

エミュレータの起動ちょっと分かりづらいです
まずAndroidStudioを起動します
このとき開いているプロジェクトは何でもいいです

赤枠のボタンをクリックする

Create Virtual Device…から任意のデバイスを選択し、Actionの実行ボタンをクリックでエミュレータが起動する

エミュレータを起動した状態で react-native run-android を実行！

またまたエラー、、、、

'adb' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

げふん、 SDK Platform-Toolsをインストールしてパスを通さないといけないようです
ここからダウンロードします

ポチっとなー

・・・・反応しない、、、一通り他のブラウザでも試してみたけど反応しない・・・
ちょっと調べてみたら、右上の言語設定を英語にするとできるらしい。。

おお、、、本当だ進めた
あとはダウンロードしたzip展開してパス通しておきます

再挑戦！

react-native run-android

やっとできたぁ。。上のように表示されればOKです
次にコードの一部を修正して「Hello World」を表示しようと思います

Hello Worldやってみる

App.jsを以下のように修正

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

const App = () => (
  <View style={styles.container}>
    <Text>Hello World</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    fontWeight: 'bold',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;