Deprecated
このブログポストはgenerator-rn-toolboxがDeprecatedされたのでもう管理しません。generator-rn-toolboxの新しいライブラリであるreact-native-makeを使うことをおすすめします。
react-native-makeに関しては下記のブログをご参考してください。
概要
mac osxで generator-rn-toolboxを使ってsplashイメージを作る方法を説明します。
ライブラリインストール
generator-rn-toolbox ライブラリインストールは前回のブログApp iconをご参考してください。
イメージ準備
splashイメージで使う2208x2208pxサイズのpsdファイルを準備します。
sketchappからpsdファイル生成
私たちはデザインでsketchappを使ってます。sketchappをpsdファイルのエクスポートができないのでイメージ準備ができませんでしけど、下記のういすればpsdファイルを作ることができます。
- sketchappでsplashイメージをデザインする。
- デザインしたsplashイメージをpngでエクスポートする。
- ネットでpng to psd converterを検索してオンライン変換ツールを探す。(私たちが使ったサイト)
splashイメージ設定
下記のコマンドで角osに合うsplashイメージを生成します。
// iOS
yo rn-toolbox:assets --splash [filename.psd] --ios
// Android
yo rn-toolbox:assets --splash [filename.psd] --android
確認
splashイメージが生成されてプロジェクトへ反映されました。プロジェクトを実行してsplashイメージが反映されたかを確認します。
// iOS
react-native run-ios
//android
react-native run-android
splashイメージがちゃんと表示されない時はシミュレーター/端末でアプリを削除してもう一度実行してください。
エラー対応
アンドロイド(Android)でsplashイメージがフルサイズ表示できない問題が発生しました。それでandroid/app/src/main/res/drawable/launch_screen_bitmap.xmlを下記のように修正して解決しました。
<bitmap
android:src="@drawable/launch_screen"
android:gravity="fill_horizontal|fill_vertical"/>
イメージ生成ができない
下記のようにエラーがでってイメージが生成されない問題が発生しました。
Error: Command failed: identify: FailedToExecuteCommand `'gs'
下記のコマンドでghostscriptをインストールします。
brew install ghostscript
また、下記のコマンドを実行したら、正常に動作することを確認することができます。 다시 아래에 명령어를 실행할 경우, 정상 동작하는 것을 확인하실 수 있습니다.
// iOS
yo rn-toolbox:assets --splash [filename.psd] --ios
// Android
yo rn-toolbox:assets --splash [filename.psd] --android
Splashイメージコントロール
アプリでSplashイメージをコントロールする場合があります。Splashイメージを画面に表示してその間ログイン処理をしたり、データを取ってくる時があります。このようにSplashイメージをコントロールする必要がある方は下記のブログを参考してください。
参考
- 公式サイト: generator-rn-toolbox
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
