react-native
redux
expo
react-navigation

【React Native】アプリ開発を楽にする、ボイラープレート作ってみた

背景

新しくアプリを作るとき毎度セットアップ (ライブラリの導入、ファイル階層を構成、開発環境設定 etc..) に時間がかかります。汎用性が高く、使い勝手のよいボイラープレートを作成し、セットアップにかかる時間を大幅に削ることが目的。
今回のボイラープレートは、expo を使用します。

ボイラープレートとは

新しくReactNativeでアプリを作り始める時の、お決まりの構成。テンプレート的なものになります。今回はどのアプリでも使える、一般的なライブラリのみを使用しています。

デフォルトで入れたライブラリ一覧

  • expo
  • react-navigation
  • react-redux
  • redux
  • redux-logger
  • redux-promise-middleware
  • redux-thunk

デモ

demo3.gif

面倒な、Stacknavigation, TabNavigation, Drawer、Redux, 開発環境(ESLint)のセットアップが完了しています。ここからアプリ毎のUI、機能を実装していきます。

使い方

セットアップは10分で完了します。

  1. こちらのリンクより、zip をダウンロードしてください。

  2. update app.jsonの name と slug 名を変更します
    "name": "your-app-name",
    "slug": "your-app-name",

  3. yarn install もしくは npm install でプロジェクトをビルド

  4. expoからプロジェクトを選択し、シミュレーターを立ち上げる。

おすすめエディタ

  • VSCode

  • エクステンションより、eslintを導入してください。
    バグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。

  • iOS開発からRect Native始めた方は、Mark Jump をインストールするといいかもしれません。MARK:TODO: が一覧で見れて、関数ジャンプもできるので、開発が非常に捗ります。

公開リンク

expoで公開しています。
https://expo.io/@wataru/react-native-boilerplate

プロジェクトはこちらにあります。(Github)
https://github.com/WataruMaeda/react-native-boilerplate

Happy Coding!