RN Spoiler

Expo の expo-template-bare-typescript をベースにした React Native のテンプレートです。

前提条件

• React Native の開発環境が構築されていること
  • 必ず「React Native CLI Quickstart」というタブをクリックして、手順を実施してください。
  • 「Development OS」は、開発に利用している OS を選択してください。
  • （macOS のみ）「Target OS」は、「iOS」「Android」の両方の手順を実施してください。

注意事項

react-native-cli がグローバルにインストールされていると、テンプレートからの新規プロジェクトの作成に失敗します。 次のコマンドでインストール状況を確認できます。

npm ls -g --depth=0

実行結果の例:

$ npm ls -g --depth=0
<path/to/npm/lib>
├── expo-cli@3.28.5
├── npm@6.14.8
└── react-native-cli@2.0.1

使い方

新規プロジェクトの作成

次のコマンドを実行して、新規プロジェクトを作成できます。

npx react-native@0.75.4 init --template https://github.com/ws-4020/rn-spoiler.git <YourAppName>

<YourAppName> に設定した名前でディレクトリが作成されます。

正しく生成できていることを確認するために、次のコマンドを実行してアプリが正しく起動することを確認してください。

npm run ios        # iPhoneシミュレータが起動します
npm run android    # Androidエミュレータが起動します

npm 7でpeerDependenciesの扱いが変更された影響で、npm 7でRN Spoilerをテンプレートとしてプロジェクトを作成すると次のようなエラーが発生する可能性があります。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @babel/core@7.9.6
npm ERR! node_modules/@babel/core
npm ERR!   dev @babel/core@"~7.9.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @babel/core@">=7.11.0" from eslint-config-universe@7.0.1
npm ERR! node_modules/eslint-config-universe
npm ERR!   dev eslint-config-universe@"^7.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

このエラーが発生した場合は次の手順でリカバリしてください。

1. cd <YourAppName>（<YourAppName>は実際に作成したときの値に変更してください）
2. npm install --legacy-peer-deps
3. （macOSの場合のみ） npx pod-install

debug.keystore ファイルについて

RN Spoilerでは新規プロジェクトの作成時に、自動的にdebug.keystoreを作成します。

ただし、新規プロジェクトを作成した環境にJDKがインストールされていないなど、keytoolが実行できなかった場合は、debug.keystoreを作成することができません。

このような場合はnpm run androidを実行する前に、debug.keystoreを作成する必要があります。プロジェクトのルートディレクトリで、次のコマンドを実行してdebug.keystoreを作成してください。コマンドの実行にはJDKがインストールされている必要があります。

keytool -genkey -v -keystore android/app/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"

expo-template-blank-typescript からの変更点

• デフォルトではexpo-updateを無効化
• (prebuildそのまま)orientation設定を削除(default: 画面方向ロックなし)
• (prebuildそのまま)assetBundlePatterns設定を削除(default: 無し)
• npm scriptsからwebを削除
• Editorconfig, ESLint, Prettierを追加
• TypeScriptの設定ファイルを修正、tscでの型チェックをlintに追加
• Androidでデフォルトで要求するパーミッションの最小化
• AndroidでDevSettingsActivityの設定を「main/AndroidManifest.xml」から「debug/AndroidManifest.xml」に移動
• AndroidでデータのGoogle Driveへのバックアップ無効化
• AndroidでProGuardの除外設定にExpoModulesPackageListを追加
• カスタムスキーマを削除(セキュリティ強化)
• App.tsxをsrcディレクトリ配下に移動
• 開発者ごとに簡単にSigningできるように、Signing情報を記述するテンプレートファイルをiOSのビルド設定に追加
• UIライブラリとしてReact Native Elementsを追加
• ナビゲーションにReact Navigationを追加、画面を修正
• アニメーションライブラリとしてReact Native Reanimatedを追加
• React Native の使い方ページを、 react-native-template-typescript から追加。
  • src/screens/instructions/Instructions.tsx は、react-native-template-typescript に含めて配布されている App.tsx を利用しています。
• Jestの設定をjest.config.jsに移動し、react-navigationとreact-native-screensに必要なネイティブモジュールをモック化
• srcディレクトリを基準とした絶対パスでimportできるように変更
• プロジェクト作成後に自動的に必要なファイルを作成するように変更
• キャッシュを削除するためのスクリプトを追加
• React Navigation用のデフォルトの型定義を追加