Zenn
👻

Expo + Typescript環境構築

2023/05/23に公開
React Native
Expo
tech

はじめに

最近React Nativeをプロジェクトで使用しています。

React Nativeを使用していて、画面遷移(ルーティング)がなんかしんどい、、という気持ちがずっとあり、プライベートでnextjsを触った時に欲しかったものはこれだ、、と思いました。

そんな中、expo routerというnextjsライクなライブラリが出たのですが、プロジェクトが素のReact Nativeプロジェクトだったため、Expoを利用したことがありませんでした。

なのでまずはExpoについて。

Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. 公式ページ

オープンソースで、アプリをReactで開発するためのプラットフォームとのことです。
説明が薄くて素のReact Nativeと何が違うの？と思いましたが、今はReact Nativeだけだときつかった、ネイティブ特有の処理などをよしなにやってくれたプラットフォームなのかなと思っておきます。

環境構築

nodejsのLTSバージョンを入れてください。
https://nodejs.org/en

自分はnodenvを利用して入れました。

nodenv install 18.16.0
nodenv local 18.16.0

プロジェクトの生成

npx create-expo-app プロジェクト名 --template
  • これで選択式のプロジェクト設定が出てくるので、typescriptを選択する
    • 素のReact Nativeは最新版だとtypescriptがデフォルトなので、この辺は必要ないのが好きです
? Choose a template: › - Use arrow-keys. Return to submit.
    Blank
❯   Blank (TypeScript) - blank app with TypeScript enabled
    Navigation (TypeScript)
    Blank (Bare)

起動

cd プロジェクト名
npx expo start

このようにQRコードとコマンドの説明が出てきたら完成。

QRコードをiPhoneや、AndroidのExpo Goアプリでスキャンすると、アプリが立ち上がる。

Fast Refresh機能も付いているため、コードを修正するとすぐにアプリに反映されます。

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

<Text>タグで囲まれた部分を修正すれば、画面の表示がすぐに書き変わります。

Discussion