ExpoでReactNativeのアプリを作成してHelloWorldをやってみる

技術

はじめに

こんにちは!さいけです。

今回は、「ExpoでReactNativeのアプリを作成してHelloWorldをやってみる」記事になります。

実践入門的な内容になっています。

前提

  • nodeをインストールしている

ExpoでReactNativeのアプリを作成してHelloWorldをやってみる

expo-cliをインストールする

まずはじめにExpoについて軽く説明します。

Expoとは、ReactNativeアプリの構築、開発、ビルド、デプロイ等の様々な開発支援を行ってくれるサービスです。

そして、これらのExpoの機能を使えるように下記コマンドでexpo-cliを端末にインストールします。

$ npm install -g expo-cli

さらにExpoを詳しく知りたい方は下記リンクで公式を見てみてください。

Expo
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React...

ReactNativeのプロジェクトを作成する

下記コマンドで、ReactNativeのプロジェクトの初期化・構築を行います。

$ expo init react-native-hello-app

プロジェクト構築の際には対話式で色々聞かれます。

テンプレートはどうするか?

下記文言が表示されると思います。

? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank               minimal dependencies to run and an empty root component
  blank (TypeScript)  same as blank but with TypeScript configuration
  tabs                several example screens and tabs using react-navigation
  ----- Bare workflow -----
  bare-minimum        minimal setup for using unimodules

これは、初期構築時に利用するテンプレートはどうするか?聞かれています。

様々なテンプレートが選べますが、今回はHelloWorldを表示することをゴールとしているので、シンプルなテンプレートを利用します。

なので、blankを選択しEnterを押します。

設定値はどうするか?

次に、下記文言が表示されると思います。

 {
   "expo": {
     "name": "react-native-hello-app",
     "slug": "react-native-hello-app"
   }
 }

app.jsonの初期設定値をどうするか?聞かれています。

とりあえず、nameとslugをreact-native-hello-appとします。

ちなみに補足になりますが、app.jsonの設定値はいつでも変更できます。

さいごにEnterを押します。

すると、ReactNativeのアプリ構築が始まります。

ソースコードを修正する

プロジェクト直下のApp.jsを下記のように修正します。

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
    </View>
  );
}

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

ネイティブアプリを起動する

プロジェクト直下で下記コマンドを入力し、ネイティブアプリを起動させます。

$ npm start

シミュレーターを起動する

無事にネイティブアプリが起動すると、ターミナル画面が以下のようになっているかと思います。

  To run the app with live reloading, choose one of:
  • Sign in as @xxx in Expo Client on Android or iOS. Your projects
    will automatically appear in the "Projects" tab.
  • Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
  • Press a for Android emulator, or i for iOS simulator.
  • Press e to send a link to your phone with email.

Press ? to show a list of all available commands.
Logs for your project will appear below. Press Ctrl+C to exit.

今回はiOSのシミュレーターで確認を行いたいです。

なので、iを押して、iOS simulatorを起動させます。

下記文言がターミナルに表示されていて、iOSシミュレーターにHello World!が表示されていればOKです。

Finished building JavaScript bundle in 6908ms.
Running application on iPhone 7.

👍🎉

おわりに

今回は、ExpoでReactNativeのアプリを作成してHelloWorldをやってみました。

ExpoでReactNativeのプロジェクトを構築する手順は様々かと思いますが、現状はこれがシンプルではやいと思います。

また、ReactNative自体は、ほぼReactの知識で書けちゃいます。

なので、ぜひHelloWorld以外も色々試してみてください!

では〜

コメント

タイトルとURLをコピーしました