「2019年にReact Nativeを使い始める：初めてのアプリケーションを構築する」をやってみた

今までReact Nativeをやってみたいと思っていたのですが、なかなか機会がなく、今回↓のチュートリアルがとてもわかりやすそうでしたのでやってみました。

Getting Started with React Native in 2019: Build Your First App

この投稿で書いてある内容は、素人の私が参考サイトの通りやってみただけの内容です。
参考サイトの方では詳しい解説などもあるため、私の投稿は読まずに参考サイトを見れば大丈夫です。
ですが一応やってみたので投稿させていただきました。

【私が試してみたコード】

バージョン

• macOS Mojave 10.14.5
• react 16.8.6
• react-native 0.60.4
• Xcode 10.2
• Android Studio 3.3.2

React Native CLI のインストール

$ yarn add -D react-native-cli
$ yarn react-native --version
yarn run v1.17.3
warning package.json: No license field
$ /Users/kengookumura/dev/tmp/rn/node_modules/.bin/react-native --version
react-native-cli: 2.0.1 # ←react-native-cliのバージョンを確認
react-native: n/a - not inside a React Native project directory
✨  Done in 0.19s.

React Native Appを実行

yarn react-native init EmojiDictRN
cd EmojiDictRN/

アプリを起動

yarn start

iOSで起動

yarn startで実行しているのとは別のターミナルのタブで↓を実行する

yarn react-native run-ios

iOSシミュレータを起動することができました

---

※最初Xcode 11.0 beta 3がインストールされている状態で行ったのですが、以下のようにエラーが出ました。
Xcode 10.2をインストールして動かせました

error Could not find "iPhone X" simulator.

↓からXcode 10.2をダウンロードしました

• More Software Downloads - Apple Developer

Androidで起動

yarn startで実行しているのとは別のターミナルのタブで↓を実行する

bash

yarn react-native run-android #※私の環境ではエラーになりました

---

エラーになってしまったので、自分がやってみことです

• React NativeのAndroid実機ビルドと出たエラー対処メモ #rnjapan - Qiita

まずこちらを参考にし、ANDROID_HOMEのパスを設定しました

export ANDROID_HOME=/Users/kengookumura/Library/Android/sdk

私の環境では↑だけではうまくいかず、

• React native Gradle issue come when start my project - Stack Overflow

↑こちらのリンクで、「アプリケーションを実行するには、Androidシミュレータを起動するか、デバイスを接続する必要がある」とあっため、↓を参考にエミュレータを起動した上でyarn react-native run-androidを実行するとうまくいきました

• Android Studioでエミュレータのセットアップ - Qiita

App.jsを変更してみる

参考サイトの通りにApp.jsを変更して、iOSシミュレータの場合はcommand + Rでリロードすると、

App.js

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

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>Hello World!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

表示を変更することができました

Hot Reloadする

iOSの場合ですと、iOSエミュレータのメニューで[Hardware] > [Shake Gesture]とするとメニューが表示されるので、
「Enable Hot Reloading」を選択するとHot Reloadしてくれました

簡単にコンポーネントを作成する

src/components/EmojiDict.jsファイルを作成する

src/components/EmojiDict.js

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

class EmojiDict extends Component {
    state = {
        '😃': '😃 Smiley',
        '🚀': '🚀 Rocket',
        '⚛️': '⚛️ Atom Symbol'
    };

    render() {
        return (
            <View style={styles.container}>
                <Text>{this.state['😃']}</Text>
            </View>
        );
    }
}

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

export default EmojiDict;

App.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import EmojiDict from './src/components/EmojiDict';

export default class App extends Component {
  render() {
    return <EmojiDict />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  }
});

---

emojiのリストをFlatListで表示するする

src/components/EmojiDict.js

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

class EmojiDict extends Component {
    state = {
        '😃': '😃 Smiley',
        '🚀': '🚀 Rocket',
        '⚛️': '⚛️ Atom Symbol'
    };

    render() {
        return (
            <FlatList
                contentContainerStyle={styles.container}
                data={[
                    { key: '😃', value: '😃 Smiley' },
                    { key: '🚀', value: '🚀 Rocket' },
                    { key: '⚛️', value: '⚛️ Atom Symbol' }
                ]}
                renderItem={({ item }) => <Text>{item.value}</Text>}
            />
        );
    }
}

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

export default EmojiDict;

---

React Nativeについてはわからないことだらけですが、とりあえず動かすことができたとてもありがたかったです。

読んでいただいてありがとうございました。m(_ _)m