2018/11/12

【React Native】Expoを使って実機でhello world

前々から興味があったReact Nativeを用いた、アプリ開発をはじめてみました。今回はExpoというReact Nativeのアプリ開発支援ツールをつかってhello worldまでやってみたいと思います。のちのち、To Doアプリの実装までやるつもりです。

はじめに

Expoを利用する際のデメリットとして、ネイティブモジュールが使えないという点が挙げられます。しかし、

100%Webの技術でアプリ開発が可能
個人開発のため、そこまで深いことをやらない
とりあえずアプリを作りきるのが目標
エディタはXcode使いたくない

という点を考慮して、自分にはExpoを使うとこによるメリットの方が大きいと感じ、Expoを利用することとしました。

環境構築

Expo公式を参考にしながら環境構築を進めます。

前提

✔️ node.jsがインストールされている

コマンドラインツールのインストール

$ npm install expo-cli --global

プロジェクトの作成

$ expo init my-new-project
$ cd my-new-project

テンプレートの種類はblankを選択します。

次のようなプロジェクトが作成されたはずです。

my-new-project
  |-assets/
  |-node_modules/
  |-App.js
  |-app.json
  |-package.json

実機テスト ~Hello Worldしよう~

起動

$ expo start

きちんと起動できれば、ターミナル上にQRコードが現れるはずです。

Expoを使えば、スマホを直接PCに接続することなく、実機テストを行うことができます。その場合アプリストアからクライアントアプリをダウンロードして、サインアップしておきます。(Android ・ iOS) もちろん、エミュレーターを使用してテストも可能です。

ルートコンポーネントであるApp.jsに以下の一文を追加して、Hello Worldします。

App.js

export default class App extends React.Component {
   render() {
     return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <Text>Hello World</Text>
        </View>
     );
   }
}

実機、もしくはエミュレータに次のような画面が表示されていれば、環境構築完了です。

emulator

Expoを使うとあっという間に、開発環境を作ることができてしまいましたね。余裕があれば、今後To Doまで実装していきたいですね！！

comments powered by Disqus

← prev next → Top