今天，我在实习中面临以下挑战：为我正在从事的项目修改/实施启动画面和图标。 但是，我更喜欢本地执行，以免依赖第三方库。我留出一些时间来研究它是如何工作的，我必须在哪里做出改变，以及它适用于什么。做秒杀后，我明白了我必须分别为 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"?>  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <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（ ) 第二个是名为 #ApeTools 的网站 ( ).在 ApeTools 中，我们上传图像并将其格式化为 iOS 或 Android 标准尺寸。在 Figma 中，我们将上传我们的 Android 图片并为它们添加 borderRadius 使它们变圆。 https://www.figma.com/ https://apetools.webprofusion.com/#/tools/imagegorilla 猿工具： 要使用它，我们将单击“选择文件”选项，选择徽标，然后选择 Android 和 iOS 基础，之后只需单击 该站点将自动呈现我们的图标。 Kapow！ 图玛： 注意：此步骤仅用于配置 Android 图标。 我们将打开网站或#Figma 应用程序，上传我们想要圆角的图像，在右侧菜单的曲线选项中，我们将输入“100”以获得完美的圆（在下面的示例中我做了它只有一个图像用于说明，但它应该在“@mipmap”的所有图像中完成并且我还使用了更大的 borderRadius 因为我的示例图像太大了）。 我的信息： 领英 ( ) https://www.linkedin.com/in/caslujpg/ Github ( ) https://github.com/caslujpg 电子邮件 ( ) caslujpg@gmail.com 如果这篇文章对你有帮助并且你想请我喝杯咖啡： 贝宝 ( ) https://www.paypal.com/donate/?hosted_button_id=ETNDVF9LP8NB8 ( 7639b894-6a88-4d43-9c39-6af265462f34 ) Pix(巴西)

This story contains new, firsthand information uncovered by the writer.

如何在 React Native 中添加图标和启动画面（无库）

Lucas Leonardo

STORY’S CREDIBILITY

Original Reporting

About Author

Topics

Languages

Around The Web...