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

背景

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

ボイラープレートとは

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

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

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

デモ

面倒な、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!