ReactNativeでAPKファイルを作成する方法
1. Node.jsインストール
- 以下のURLからインストーラーをダウンロードする。
- インストーラーを起動し、インストールする。
- コマンドプロンプ開き、以下コマンドを実行する
node --version npm --version - バージョンが表示されれば成功
2. ReactNativeインストール
- コマンドプロンプトを開き、以下コマンドを実行する
npm install -g react-native-cli npx react-native -v- 実行結果
C:\Users\ユーザ名>npm install -g react-native-cli C:\Users\ユーザ名\AppData\Roaming\npm\react-native -> C:\Users\ユーザ名\AppData\Roaming\npm\node_modules\react-native-cli\index.js + react-native-cli@2.0.1 added 88 packages from 27 contributors in 6.872s -
npx react-native -vコマンドでバージョンが表示されれば成功
3. Java11インストール
- 以下のリンクからJava11をダウンロードする
- ダウンロードしたZIPファイル（
openjdk-11+28_windows-x64_bin.zip）を展開し、C:\Program Files\Java直下（任意）に配置する - システム環境変数を開く
-
環境変数(N)...を押下する
-
新規(W)...を押下し、変数名：JAVA_HOME値：展開したZIPファイルを配置したパスを作成する
-
Pathを選択し、編集(I)...を押下する
-
新規(N)を押下し、%JAVA_HOME%\binを追加する
- コマンドプロンプトを開き、以下コマンドを実行する
javac -version - バージョンが表示されれば成功
4. Android Studioインストール
- 以下のURLからインストーラーをダウンロードする。
- インストーラーを起動し、インストールする。
- Android Studioの起動が確認できれば成功
5. ReactNativeプロジェクト作成
- コマンドプロンプトを開く
- 任意のフォルダに移動してサンプルのプロジェクトを作成する
npx create-react-native-app プロジェクト名 - 以下の文章が表示された場合、
Enterを押下するnpx: installed 1 in 1.307s ? How would you like to start » - Use arrow-keys. Return to submit. > Default new app Template from expo/examples: https://github.com/expo/examples - 以下の文章が表示され、プロジェクト名のフォルダが作成されていれば成功
npx: installed 1 in 1.307s √ How would you like to start » Default new app √ Downloaded and extracted project files. Using Yarn to install packages. You can pass --use-npm to use npm instead. √ Installed JavaScript dependencies. √ Skipped installing CocoaPods because operating system is not on macOS. ✅ Your project is ready! To run your project, navigate to the directory and run one of the following yarn commands. - cd Sample - yarn android - yarn ios # you need to use macOS to build the iOS project - use the Expo app if you need to do iOS development without a Mac - yarn web
6. keystore作成
- androidフォルダに移動する
cd 【プロジェクト名フォルダのパス】\android - 以下コマンドを実行する
keytool -genkeypair -v -storetype PKCS12 -keystore 【キーファイル名】.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 - 以下の通り値を入力する
-
キーストアのパスワードを入力してください:- 6文字以上で任意の文字列
-
新規パスワードを再入力してください:- 先ほど入力したパスワード
-
姓名は何ですか。- 任意の文字列
-
組織単位名は何ですか。- 任意の文字列
-
組織名は何ですか。- 任意の文字列
-
都市名または地域名は何ですか。- 任意の文字列
-
都道府県名または州名は何ですか。- 任意の文字列
-
この単位に該当する2文字の国コードは何ですか。- jp（任意）
-
CN=【入力した姓名】, OU=【入力した組織単位名】, O=【入力した組織名】, L=【入力した都市名または地域名】, ST=【入力した都道府県名または州名】, C=【入力した2文字の国コード】でよろしいですか。- 内容が正しければ
y、正しくなければEnterで修正できる。
- 内容が正しければ
【入力例】 キーストアのパスワードを入力してください: 新規パスワードを再入力してください: 姓名は何ですか。 [Unknown]: hogehoge 組織単位名は何ですか。 [Unknown]: fugafuga 組織名は何ですか。 [Unknown]: hogefuga 都市名または地域名は何ですか。 [Unknown]: hoge 都道府県名または州名は何ですか。 [Unknown]: fuga この単位に該当する2文字の国コードは何ですか。 [Unknown]: jp CN=hogehoge, OU=fugafuga, O=hogefuga, L=hoge, ST=fuga, C=jpでよろしいですか。 [いいえ]: y -
- 以下の文章が表示されれば成功
10,000日間有効な2,048ビットのRSAの鍵ペアと自己署名型証明書(SHA256withRSA)を生成しています ディレクトリ名: CN=hogehoge, OU=hoge, O=fuga, L=hogefuga, ST=fugahoge, C=jp [【キーファイル名】.keystoreを格納中]
7. APKファイル作成
1.【プロジェクト名フォルダのパス】/android/gradle.properties の先頭に以下を追加する
MYAPP_UPLOAD_STORE_FILE=[【キーファイル名】.keystore] # keytoolコマンドで作成したファイル名
MYAPP_UPLOAD_KEY_ALIAS=[my-key-alias] # 固定
MYAPP_UPLOAD_STORE_PASSWORD=[【keytoolコマンドで設定したパスワード】] # keytoolコマンドで設定したパスワード
MYAPP_UPLOAD_KEY_PASSWORD=[【keytoolコマンドで設定したパスワード】] # keytoolコマンドで設定したパスワード
2.【プロジェクト名フォルダのパス】/android/ に local.properties ファイルを作成する
local.properties
sdk.dir = C:/Users/【ユーザ名】/AppData/Local/Android/Sdk
3.【プロジェクト名フォルダのパス】/android/ をコマンドプロンプトで開き、以下コマンドを実行する
gradlew bundleRelease
4.以下の文章が表示されることを確認する
BUILD SUCCESSFUL in 1m 4s
230 actionable tasks: 224 executed, 6 up-to-date
5.コマンドプロンプトで以下コマンドを実行する
gradlew assembleRelease
6.【プロジェクト名フォルダのパス】/android/app/build/outputs/apk/release に app-release.apk が存在すれば成功
8. 適当なエミュレータで動作確認
- エミュレータで以下の画面が表示されれば成功
GitHub
GitHubにソースコードを公開しています。