Create your first app

プロジェクトを作る

以下コマンドでプロジェクトを作る。StickerSmashというプロジェクトなら↓

npx create-expo-app@latest StickerSmash

何も指定しなかった場合はdefaultのテンプレートが使用される チュートリアル用のプロジェクトアセットがあるので、ダウンロードして、指定された場所へ展開。

プロジェクトのリセット

デフォルトのプロジェクトにはボイラープレートがあるので、それを取り除くために以下のコマンドを実行する

npm run reset-project

ボイラープレートのファイルなどが別のディレクトリに移動して、まっさらな状態にしてくれる

プロジェクトの実行

開発サーバを起動するには以下のコマンドを実行する

npx expo start

QRコードが出てくるので、Expo GoアプリでこのQRを読み取る

画面を変更する

app/index.tsxを以下のように変更。

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

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>
    </View>
  );
}

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

保存すると、Expo Goで反映されているはず。