React Native + Expo で一瞬で作るHello Worldアプリ

React Native
https://reactnative.dev/docs/getting-started

Expo
https://docs.expo.dev/get-started/installation/

前提

Nodeが入ってること

作る

expo CLIをダウンロードする

$ yarn global add expo-cli

expo CLIでプロジェクトを作る。

$ expo init AwesomeProject

プロジェクトのディレクトリに移動して

$ cd AwesomeProject

App.jsの<Text>タグ内をHello World !に編集する

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

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

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

サーバー起動

$ yarn start

※ expo startでもOK

Android端末 か iOS端末で Expo Goをストアからインストールする

さっき起動したターミナルか起動した時に開いたブラウザページのQRコードをExpo Goで読み取る

終わり。

感想

すごい簡単じゃん

Expo は全てのAndroid / iOSのAPIが使えるわけではなかったり、その他にも制限はあるみたいなので、使う前に読んでおいたほうがいいね
https://docs.expo.dev/introduction/why-not-expo/?redirected