8,515 測定値

React Native (ライブラリなし) でアイコンとスプラッシュスクリーンを追加する方法

に Lucas Leonardo7m2023/03/15

長すぎる; 読むには

このチュートリアルは、create-react-app を使用して構築されたアプリケーションで作成されました。 Apple の環境で作業するには、macOS が必要です。このためには、さまざまなサイズのアイコンと丸いバージョンのアイコン (背景なし) が必要です。また、これらのサイズがない場合は、これを構成する方法に関するステップバイステップのガイドがあることに注意してください.

featured image - React Native (ライブラリなし) でアイコンとスプラッシュスクリーンを追加する方法

今日、私はインターンシップで次の課題に直面しました: 私が取り組んでいるプロジェクトのスプラッシュスクリーンとアイコンを変更/実装することです。

ただし、サードパーティのライブラリに依存しないように、ネイティブで行うことを好みました。スパイクがどのように機能するか、どこに変更を加える必要があるか、何に適用されるかについて、スパイク (調査) を行う時間を確保しました。スパイクを実行した後、iOS と Android で別々に実行する必要があることがわかりました。

まずはiOSから！

注: このチュートリアルは、create-react-app を使用して構築されたアプリケーションで作成されました。

iOS

まず、Apple の環境で作業するには、macOS が必要であることを覚えておく必要があります。プロジェクトが既に作成されているので、「ios」フォルダーに移動してXcodeで開きましょう。

その後、以下の架空の例に従って、プロジェクトの名前のフォルダーに移動します。
次に、「画像」ファイルに移動します。ここには、サイズオプションがあります。各寸法に対応する画像をドラッグするだけで、スプラッシュスクリーンで使用するアプリのアイコンにもなります (基準を満たすように画像をフォーマットする方法がわからない場合は、記事の最後にそれを行う方法に関する簡単なチュートリアル）。
この時点で、アイコンの構成はすでに完了しており、スプラッシュスクリーンに移ります。このステップでは、例として無地の背景と中央の画像を使用しますが、作成したデザインのように編集できます (または、想像したとおりに笑)。

まず、Xcode で「LaunchScreen」ファイルを開きます。このファイルでは、 'View Controller Scene' → 'View Controller' → 'View'順にナビゲートします。

このフィールドには、画面上の有用なスペースに過ぎないセーフエリアがあります。

デフォルトでは、作成時にアプリに付けた名前と、「Powered by React Native」というフッターが付いています。この場合、フッターとアプリ名を削除します。その後、右上隅の「+」をクリックして「画像ビュー」オプションに移動し、アプリケーションにドラッグして中央に配置し、応答性を調整します。
すべてを調整したので、Xcode を閉じてアプリケーションをビルドします。アプリがすべて構成されます

(注: 以前に携帯電話またはエミュレーターで実行したことがある場合は、アイコンの変更が適用されるようにアプリを削除することを忘れないでください)!

アンドロイド

それでは、Android の設定に移りましょう。このためには、さまざまなサイズのアイコンと丸いバージョンのアイコン (背景なし) が必要です。また、これらのサイズがない場合は、投稿の最後に設定方法のステップバイステップガイドがあります。 iOS で行ったこととは少し異なりますが、ここでは Android Studio を使用せず、代わりにコードを直接変更することにしました。その書式設定メニューがあまり興味深いとは思えなかったからです。
画像が既にデバイスに保存されている状態で、ファイルマネージャー → android → app → src → main → res でアプリケーションフォルダーを開きます。「res」フォルダー内には、「drawable」フォルダーとその他の「mipmap-suffix」フォルダーがあります。

「drawable」フォルダーは、スプラッシュを構成し、メインアイコンを配置する場所です。「mipmap」フォルダーは、さまざまなアイコンサイズと丸いアイコンを担当します。最初に行うことは、アイコンファイルを自分のものに置き換えることです。以下に示すように、ネイティブコードをまだ変更する必要がないように、既存のものと同じ名前を使用することをお勧めします。

アプリケーション全体に変更を加えたので、ネイティブ部分に移ります。 drawable フォルダー内には、「rn_edit_text_material.xml」というファイルがあり、その中でいくつかの構成を行います。

冗長にならないように、私が使用した構成を残して、単純にコピーしてコードに貼り付け、各変更について説明します。 <layer-list>タグを追加して、プロジェクトスキーマを指示します。、その中に使用したいものを渡しました。

この場合、 <item android: drawable="@color/primary" />タグを使用して背景色を設定し (次のステップで設定します)、最後のタグでitem android:プレフィックスを設定します。寸法、使用する画像、デバイス画面での位置。

 <?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2014 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I). The item below with state_pressed="false" and state_focused="false" causes a NullPointerException. NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/> For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR. --> <item android:drawable="@color/primary" /> <item android:width="100dp" android:height="100dp" android:drawable="@drawable/icon" android:gravity="center" /> </layer-list>

ここで、backgroundColor を構成します。そのために、"res" フォルダーに移動し、"values" フォルダー内に "colors.xml" というファイルを作成します。以下のコードを追加します。このコードには、前の手順で指定した名前と同じ名前の背景色タグを持つ<resources>タグが含まれています。
```
 <?xml version="1.0" encoding="utf-8" ?> <resources> <color name="primary">#f2f2f2</color> </resources>
```

「styles.xml」は「values」フォルダー内のファイルで、アプリの作成時にデフォルトで設定される次の行を編集します。
```
 <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
```
このコードに：
```
 <item name="android:windowBackground"> @drawable/rn_edit_text_material </item> <item name="android:statusBarColor"> @color/primary </item>
```
上記のコードスニペットでは、背景が属するウィンドウを上部に設定し、下部に色 (前に定義したもの) を設定します。よくやった！ Android アプリは、新しいスプラッシュスクリーンとアイコンですべて設定されているはずです。アプリストアに公開する前に、徹底的にテストすることを忘れないでください。あなたのアプリで頑張ってください！

希望のサイズのアイコンを作成します。

アイコンを正確なサイズで作成するには、2 つのツールを使用します。最初のツールは #Figma ( https://www.figma.com/ ) 2 つ目は #ApeTools という Web サイト ( https://apetools.webprofusion.com/#/tools/imagegorilla ）。 ApeTools で画像をアップロードすると、iOS または Android の標準サイズにフォーマットされます。 Figma では、Android 画像をアップロードし、borderRadius を追加して丸みを帯びさせます。

Apeツール:
それを使用するには、「ファイルを選択」オプションをクリックし、ロゴを選択してから、Android および iOS ベースを選択します。その後、 Kapow をクリックします。サイトは自動的にアイコンをレンダリングします。
フィグマ：
注: この手順は、Android アイコンの構成専用です。

ウェブサイトまたは#Figmaアプリケーションを開き、丸めたい画像をアップロードし、右側のメニューの曲線オプションで「100」を入力して完全な円を取得します（下の例では私がやった説明用の画像は1つだけですが、「@mipmap」のすべての画像で行う必要があり、サンプル画像が大きすぎるため、大きなborderRadiusも使用しました)。