Splashイメージ

2019-05-23

generator-rn-toolboxを使ってSplashイメージを設定して見ましょう。

概要

mac osxで generator-rn-toolboxを使ってsplashイメージを作る方法を説明します。

ライブラリインストール

generator-rn-toolbox ライブラリインストールは前回のブログApp iconをご参考してください。

イメージ準備

splashイメージで使う2208x2208pxサイズのpsdファイルを準備します。

sketchappからpsdファイル生成

私たちはデザインでsketchappを使ってます。sketchappをpsdファイルのエクスポートができないのでイメージ準備ができませんでしけど、下記のういすればpsdファイルを作ることができます。

  1. sketchappでsplashイメージをデザインする。
  2. デザインしたsplashイメージをpdfでエクスポートする。
  3. ネットでpdf 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

参考

Buy me a coffeeBuy me a coffee
Posts