【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>
);
}
}
実機、もしくはエミュレータに次のような画面が表示されていれば、環境構築完了です。
Expoを使うとあっという間に、開発環境を作ることができてしまいましたね。余裕があれば、今後To Doまで実装していきたいですね!!
comments powered by Disqus