🤖

Expo環境構築

2020/09/29に公開

React Native

Expo

tech

1:ReactNativeとは

クロスプラットフォーム開発を行う (iOS, Android)
普通は、expo か react-native-cliのどちらかを使って開発することがほとんど。

expo

制限あるがほとんどは問題無し。けど、react-native-cliよりも簡易。
ejectを行った場合、expoの制限を超えられるがリスクもある。

react-native-cli

制限無し

今回は、そのexpoの開発環境を構築していきます。

先に

windowsの方はこちらが参考になるかと思います。

PlayGround

https://snack.expo.io/

2:Node.JSのインストール

https://nodejs.org/en/
公式では、最新バージョンをオススメしているけど、安定版でも問題なさそう。
v10.9.0でも確認できました。

3:expo-cliのインストール

npm install expo-cli --global

4:create an app

expo init myNewProject
cd myNewProject
expo start

expo init の際にテンプレートを選ぶ必要があるが、最初であれば一番上のものでOKかと
expo startで http://localhost:19002/　ポートが開きます

4-a:実機で確認したい場合

expo.io/learnより。
Open the Expo development client on your device. Scan the QR code printed by expo start with Expo Client (Android) or Camera (iOS). You may have to wait a minute while your project bundles and loads for the first time.

使っている端末から開ける。ローカルホストで表示されている左下のQRコードを読み取ってくれ、あとはこっちで何とかしたる！って言ってます、カッケェ。
バンドル→ロードまで、最初だけ読み込み1分ほどかかるらしい。

iPhoneの方、AppStore

Androidの方、GooglePlay

Open up App.js to start working on your app!

と表示されたらOKです！

4-b:シミュレータ/エミュレータで確認したい場合

Mac
XCodeのインストールが必要
Android
AndroiStudioのインストールが必要

Q:もしXCodeで以下のエラーがでたら...

Error running `xcrun simctl list devices --json`: xcrun: error: unable to find utility "simctl", not a developer tool or in PATH

で、私は解消できました。

XCode > References > Locations
でCommand Line Toolsで選択できるデバイスを設定しましょう。選択できるデバイスがない場合、そもそもデバイスをインストールをしていないので、version指定してデバイスを一つインストールすることをオススメします。

Q:もしAndroidStudioでエラーがでたら

自分は実機で確認しているので、まだ本格的にエミュレータを使ってはいないのですが、こちらが参考になりそうです。udemyの人も同じ部分説明していました。

手取り早く動いているかみたい場合

expo start後、
左真ん中の Run in web browserでウェブブラウザ上で確認できます。

ここからは実際に、動かしてみます。

5:Styleを変更してみる

App.jsを以下のように変更すると、色とフォントサイズが変わります

<Text style={{color:'#267c7c', fontSize: 18}}>Open up App.js to start working on your app!</Text>

6:画像の添付

デフォルトで用意されているasset内の画像を出力してみます

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import logo from './assets/splash.png';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{color:'#267c7c', fontSize: 18}}>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <!-- ここでの305は305px -->
      <Image source={logo} style={{ width: 305, height: 159 }} /> 
    </View>
  );
}

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

URLで指定する場合、Imageの部分を以下のように変更

 <Image source={{ uri: "https://i.imgur.com/TkIrScD.png" }} style={{ width: 305, height: 159 }} />

7:ボタンの作成

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

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={{ uri: 'https://i.imgur.com/TkIrScD.png' }} style={styles.logo} />
      <Text style={styles.instructions}>
        To share a photo from your phone with a friend, just press the button below!
      </Text>

      <TouchableOpacity
        onPress={() => alert('Hello, world!')}
        style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 20, color: '#fff' }}>Pick a photo</Text>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 305,
    height: 159,
    marginBottom: 20,
  },
  instructions: {
    color: '#888',
    fontSize: 18,
    marginHorizontal: 15,
    marginBottom: 10,
  },
});

続きはExpoドキュメントからどうぞ

Tips --offline

expo start --offline

オプションをつけることで、
JSのビルドが早くなり、エミュレータ/シミュレータで確認する際の高速化につながります。

参考記事