スマホアプリのモックを ReactNative + Expo でつくってみた備忘録

ReactNative Expo

React 未経験なのに React Native + Expo でスマホアプリのモックを作っているので、開発環境の構築からつまずきポイントまでまとめます。

環境は Mac + VSCode です。

各種インストール

先人に助けてもらいます。

qiita.com

qiita.com

Homebrew は入っていたので僕がインストールしたのは以下の3つ。

  • nodebrew
  • node.js
  • Expo

nodebrew

$ brew install nodebrew

追加してねって言われた PATH ではうまく行かなかったので $ which nodebrew して bin を設定。 ここは参考にしないほうがいいかもしれないです。

export PATH=/usr/local/var/nodebrew/current/bin:$PATH
export NODEBREW_ROOT=/usr/local/var/nodebrew
$ source ~/.bash_profile
$ nodebrew setup

node.js

$ nodebrew install-binary latest
$ nodebrew use v8.5.0

これで node.js と npm がインストールされる。

Expo

$ npm install -g exp

以上。

プロジェクトの作成と起動

$ expo init my-native-app
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank         minimal dependencies to run and an empty root component  
  tabs          several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  bare-minimum  minimal setup for using unimodules

blank は最小構成、tabs はタブなどの機能が実装済みのプロジェクトが作成されます。 両方作って見比べれば大体のことはわかる気がします。

プロジェクトのルートディレクトリで $ expo start すると、諸々が起動してコンソールとブラウザに QR コードが表示されます。 この QR コードを Expo — Get Expo tools にある Expo Client をインストールしたスマホで読み取ると、実機での確認ができます。

Android、iOS のシミュレータ起動中にコンソール上で a で Android、 i で iOS シミュレータ上でアプリが起動します。

プロジェクトの設定

フォーマッタ

qiita.com

プロジェクトのルートディレクトリで以下を実行

$ npm i -D eslint
$ npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
$ npm i -D babel-eslint

ESLint のルールを .eslintrc に設定。

{
  "extends": "airbnb",
  "parser": "babel-eslint",
}

VSCode で Pretter を利用しているので .vscode/settings.json に下記も設定。 prettier.eslintIntegration で Prettier と ESLint を連携させます。

{
  "editor.formatOnSave": true,
  "javascript.format.enable": false,
  "prettier.eslintIntegration": true
}

Decorators

GitHub - expo/react-native-action-sheet: A cross-platform ActionSheet for React Native など Decorators を利用するコンポーネントを追加したときに起動できるように .babelrc に設定を追加します。 babel.config.js で同じことをやってる気はしますが...

{
  "presets": ["babel-preset-expo"]
}

VSCode を利用していると Decorators は将来実装予定の機能というエラーになるので、ルートディレクトリに jsconfig.json を作って黙らせます。

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "amd",
    "target": "ES6"
  }
}

この設定は精査してないので過不足あるかもしれないです。

ひとまずこんなところです。 なにかあれば追記していくかもしれないです。