🧊

React Nativeでアプリを作る過程で使うであろう画像について

以下の2つについて。

  • アプリ内で出す画像
  • App Icon

XCode慣れしてないフロントエンドエンジニア向け。

アプリ内で出す画像

なんとまあ以下のコードが動く。

import Icon from './icon/foo.png';

<Image source={Icon} />

`import() | require()`で画像ファイルが読める・・！
スタイルは他と同じく当てればいいです。

ちなみにファイル名にも注意が必要。
上の例みたく`foo.png`でアクセスしつつも実体のファイルとしては、`foo@2x.png`とかできます。
解像度の調整はファイル名でやるし、`foo@20x.png`とかにすれば1/20サイズで表示できます。

App Icon

プロジェクトのツリーViewにある`images.xcassets`から。
`AppIcon`ってのがあるので、必要な画像をドラッグアンドドロップで追加すればおっけー。

にしてもサイズ違いの画像8パターンくらい必要で萎える。

その他

アプリを起動時に表示されるSplash画面は、プロジェクトのツリーViewにある`LaunchScree.xib`からポチポチやればいじれる。
画像出したいなら普通にImageViewを追加して配置。