8,520 讀數

如何在 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' 。

在这个字段中，我们有安全区，无非就是屏幕上的有用空间。

默认情况下，它已经带有您在创建应用程序时为其指定的名称和页脚“由 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/ ) 第二个是名为 #ApeTools 的网站 ( https://apetools.webprofusion.com/#/tools/imagegorilla ).在 ApeTools 中，我们上传图像并将其格式化为 iOS 或 Android 标准尺寸。在 Figma 中，我们将上传我们的 Android 图片并为它们添加 borderRadius 使它们变圆。

猿工具：
要使用它，我们将单击“选择文件”选项，选择徽标，然后选择 Android 和 iOS 基础，之后只需单击Kapow！该站点将自动呈现我们的图标。
图玛：
注意：此步骤仅用于配置 Android 图标。

我们将打开网站或#Figma 应用程序，上传我们想要圆角的图像，在右侧菜单的曲线选项中，我们将输入“100”以获得完美的圆（在下面的示例中我做了它只有一个图像用于说明，但它应该在“@mipmap”的所有图像中完成并且我还使用了更大的 borderRadius 因为我的示例图像太大了）。