如何在登台和生产中将应用程序图标和启动屏幕添加到React Native应用程序
by Khoa Pham
通过Khoa Pham
如何在登台和生产中将应用程序图标和启动屏幕添加到React Native应用程序 (How to add app icons and splash screens to a React Native app in staging and production)
React Native was designed to be “learn once, write anywhere,” and it is usually used to build cross platform apps for iOS and Android. And for each app that we build, there are times we need to reuse the same code, build and tweak it a bit to make it work for different environments. For example, we might need multiple skins, themes, a free and paid version, or more often different staging and production environments.
React Native旨在“一次学习，随处编写”，通常用于构建适用于iOS和Android的跨平台应用程序。 对于我们构建的每个应用程序，有时都需要重复使用相同的代码，对其进行一些构建和调整，以使其适用于不同的环境。 例如，我们可能需要多个外观，主题，免费和付费版本，或更经常需要不同的登台和生产环境。
And the task that we can’t avoid is adding app icons and splash screens to our apps.
我们无法避免的任务是向应用程序添加应用程序图标和启动屏幕。
In fact, to add a staging and production environment, and to add app icons, requires us to use Xcode and Android Studio, and we do it the same way we do with native iOS or Android projects.
实际上，要添加一个暂存和生产环境并添加应用程序图标，就需要我们使用Xcode和Android Studio，并且其处理方式与处理本机iOS或Android项目的方式相同。
Let’s call our app MyApp and bootstrap it with react-native init MyApp . There will of course, be tons of libraries to help us with managing different environments.
让我们调用我们的应用程序MyApp并使用react-native init MyApp引导它。 当然，会有大量的图书馆来帮助我们管理不同的环境。
In this post, we will do just like we did with native apps, so that we know the basic steps.
在本文中，我们将像使用本机应用程序一样进行操作，以便我们了解基本步骤。
构建配置，目标，构建类型，生产风格和构建变体 (Build configuration, target, build types, production flavor, and build variant)
There are some terminologies we needed to remember. In iOS, debug and releases are called build configurations, and staging and production are called targets.
我们需要记住一些术语。 在iOS中，调试和发布称为构建配置 ，过渡和生产称为target 。
A build configuration specifies a set of build settings used to build a target’s product in a particular way. For example, it is common to have separate build configurations for debug and release builds of a product.
构建配置指定一组用于以特定方式构建目标产品的构建设置。 例如，通常有单独的构建配置用于产品的调试和发布构建。
A target specifies a product to build and contains the instructions for building the product from a set of files in a project or work-space. A target defines a single product; it organizes the inputs into the build system — the source files and instructions for processing those source files — required to build that product. Projects can contain one or more targets, each of which produces one product
目标指定要构建的产品，并包含从项目或工作空间中的一组文件构建产品的说明。 目标定义单个产品； 它将构建产品所需的输入组织到构建系统中(源文件和处理这些源文件的说明)。 项目可以包含一个或多个目标，每个目标产生一个产品
In Android, debug and releases are called build types, and staging and production are called product flavors. Together they form build variants.
在Android中，调试和发布称为构建类型，过渡和生产称为产品类型。 它们共同构成了构建变体 。
For example, a “demo” product flavor can specify different features and device requirements, such as custom source code, resources, and minimum API levels, while the “debug” build type applies different build and packaging settings, such as debug options and signing keys. The resulting build variant is the “demoDebug” version of your app, and it includes a combination of the configurations and resources included in the “demo” product flavor, “debug” build type, and
main/source set.例如，“演示” 产品风格可以指定不同的功能和设备要求，例如自定义源代码，资源和最低API级别，而“调试” 构建类型则应用不同的构建和打包设置，例如调试选项和签名键。 生成的构建变体是应用程序的“ demoDebug”版本，它包含“ demo”产品类型，“ debug”构建类型和
main/源集中包含的配置和资源的组合。
iOS中的登台和生产目标 (Staging and production targets in iOS)
Open MyApp.xcodeproj inside ios using Xcode. Here is what we get after bootstrapping:
使用Xcode在ios打开MyApp.xcodeproj 。 这是我们在引导后得到的：
React Native creates iOS and tvOS apps, and two test targets. In Xcode, a project can contain many targets, and each target means a unique product with its own build settings — Info.plist and app icons.
React Native创建了iOS和tvOS应用程序，以及两个测试目标。 在Xcode中，一个项目可以包含许多目标，并且每个目标都意味着具有自己的构建设置的唯一产品-Info.plist和应用程序图标。
目标重复 (Duplicate target)
If we don’t need the tvOS app, we can delete the MyApp-tvOS and MyApp-tvOSTests . Let’s use MyApp target as our production environment, and right click -> Duplicate to make another target. Let’s call it MyApp Staging.
如果不需要tvOS应用程序，则可以删除MyApp-tvOS和MyApp-tvOSTests 。 让我们使用MyApp目标作为我们的生产环境，然后right click -> Duplic ate来创建另一个目标。 我们称其it MyApp Stag ing。
Each target must have unique bundle id. Change the bundle id of MyApp to com.onmyway133.MyApp and MyApp Staging to com.onmyway133.MyApp.Staging.
每个目标必须具有唯一的捆绑包ID。 将MyApp的捆绑包ID更改为com.onmyway133.MyApp并将MyApp Staging更改为com.onmyway133.MyApp.Staging 。
信息清单 (Info.plist)
When we duplicate MyApp target , Xcode also duplicates Info.plist into MyApp copy-Info.plist for the staging target. Change it to a more meaningful name Info-Staging.plist and drag it to the MyApp group in Xcode to stay organised. After dragging, MyApp Staging target can’t find the plist, so click Choose Info.plist File and point to the Info-Staging.plist.
当我们复制MyApp target ，Xcode还将Info.plist MyApp copy-Info.plist到暂存目标的MyApp copy-Info.plist中。 将其更改为更有意义的名称Info-Staging.plist并将其拖到Xcode的MyApp组中，以保持井井有条。 拖动后， MyApp Staging目标找不到该plist，因此单击Choose Info.plist File并指向Info-Staging.plist 。
方案 (Scheme)
Xcode also duplicates the scheme when we duplicate the target, so we get MyApp copy:
当我们复制目标时，Xcode也会复制该方案，因此我们得到MyApp copy ：
Click Manage Schemes in the scheme drop-down to open Scheme manager:
单击方案下拉菜单中的Manage Schemes以打开方案管理器：
I usually delete the generated MyApp copy scheme, then I create a new scheme again for the MyApp Staging target. You need to make sure that the scheme is marked as Shared so that it is tracked into git.
我通常会删除生成的MyApp copy方案，然后再次为MyApp Staging目标创建一个新方案。 您需要确保将该方案标记为Shared，以便将其跟踪到git中。
For some reason, the staging scheme does not have all the things set up like the production scheme. You can run into issues like ‘React/RCTBundleURLProvider.h’ file not found or RN: ‘React/RCTBridgeModule.h’ file not found . It is because React target is not linked yet.
由于某种原因，暂存方案没有像生产方案那样设置所有内容。 您可能遇到'React/RCTBundleURLProvider.h' file not found或RN: 'React/RCTBridgeModule.h' file not found 'React/RCTBundleURLProvider.h' file not found RN: 'React/RCTBridgeModule.h' file not found 。 这是因为React目标尚未链接。
To solve it, we must disable Parallelise Build and add React target and move it above MyApp Staging.
为了解决这个问题，我们必须禁用Parallelise Build并添加React目标并将其移动到MyApp Staging之上。
在Android中登台和生产产品口味 (Staging and production product flavors in Android)
Open the android folder in Android Studio. By default there are only debug and release build types:
在Android Studio中打开android文件夹。 默认情况下，只有调试和发布构建类型：
They are configured in the app module build.gradle:
它们在app模块build.gradle进行配置：
buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" }}First, let’s change application id to com.onmyway133.MyApp to match iOS. It is not required but I think it’s good to stay organised. Then create two product flavors for staging and production. For staging, let’s add .Staging to the application id.
首先，让我们将应用程序ID更改为com.onmyway133.MyApp以匹配iOS。 这不是必需的，但我认为保持井井有条是很好的。 然后创建两种产品口味以进行分期和生产。 对于登台，让我们在应用程序ID中添加.Staging 。
From Android Studio 3, “all flavors must now belong to a named flavor dimension” — normally we just need default dimensions. Here is how it looks in build.gradle for our app module:
在Android Studio 3中，“现在所有风味都必须属于命名的风味维度” —通常我们只需要默认维度。 这是我们app模块在build.gradle中的外观：
android { compileSdkVersion rootProject.ext.compileSdkVersion buildToolsVersion rootProject.ext.buildToolsVersion flavorDimensions "default"defaultConfig { applicationId "com.onmyway133.MyApp" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" ndk { abiFilters "armeabi-v7a", "x86" } } splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk false // If true, also generate a universal APK include "armeabi-v7a", "x86" } } buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } }productFlavors { staging { applicationIdSuffix ".Staging" }production {} }}Click Sync Now to let gradle do the syncing job. After that, we can see that we have four build variants:
点击Sync Now ，让gradle完成同步工作。 之后，我们可以看到我们有四个构建变体：
如何进行分期和生产 (How to run staging and production)
To run the Android app, we can specify a variant like react-native run-android — variant=productionDebug, but I prefer to go to Android Studio, select the variant, and run.
要运行Android应用程序，我们可以指定一个类似react-native run-android — variant=productionDebug ，但是我更喜欢转到Android Studio，选择该变体并运行。
To run iOS app, we can specify the scheme like react-native run-ios — simulator=’iPhone X’ — scheme=”MyApp Staging” . As of react-native 0.57.0 this does not work. But it does not matter as I usually go to Xcode, select the scheme, and run.
要运行iOS应用，我们可以指定类似react-native run-ios — simulator='iPhone X' — scheme=”MyApp Staging” 。 从react-native 0.57.0此功能无效。 但这并不重要，因为我通常会去Xcode，选择方案并运行。
为iOS添加应用图标 (Add app icon for iOS)
According to the Human Interface Guideline, we need app icons of different sizes for different iOS versions, device resolutions, and situations (notification, settings, Spring Board). I’ve crafted a tool called IconGenerator, which was previously mentioned in Best Open Source Tools For Developers. Drag the icon that you want — I prefer those with 1024x1024 pixels for high resolution app icons — to the Icon Generator MacOS app.
根据人机界面指南 ，我们需要针对不同的iOS版本，设备分辨率和情况(通知，设置，跳板)使用大小不同的应用程序图标。 我精心设计了一个名为IconGenerator的工具，该工具曾在最佳开发人员开源工具中提到过。 将所需的图标(我希望使用1024x1024像素的图标作为高分辨率应用程序图标)拖到Icon Generator MacOS应用程序中。
Click Generate and we get AppIcon.appiconset . This contains app icons of the required sizes that are ready to be used in Asset Catalog. Drag this to Asset Catalog in Xcode. That is for production.
单击Generate ，我们将获得AppIcon.appiconset 。 其中包含可以在资产目录中使用的所需大小的应用程序图标。 将此拖到Xcode中的Asset Catalog。 那是为了生产。
For staging, it’s good practice to add a “Staging” banner so that testers know which is staging, and which is production. We can easily do this in Sketch.
对于登台，优良作法是添加“登台”标语，以便测试人员知道哪个在登台，哪个在生产。 我们可以在Sketch中轻松完成此操作。
Remember to set a background, so we don’t get a transparent background. For an app icon with transparent background, iOS shows the background as black which looks horrible.
请记住设置背景，这样我们就不会获得透明的背景。 对于具有透明背景的应用程序图标，iOS将背景显示为黑色，看起来很恐怖。
After exporting the image, drag the staging icon to the IconGenerator the same way we did earlier. But this time, rename the generated appiconset to AppIcon-Staging.appiconset. Then drag this to Asset Catalog in Xcode.
导出图像后，将暂存图标拖动到IconGenerator上，方法与之前相同。 但是这次，将生成的appiconset重命名为AppIcon-Staging.appiconset 。 然后将其拖到Xcode中的Asset Catalog。
For the staging target to use staging app icons, open MyApp Staging target and choose AppIcon-Staging as App Icon Source.
为了使登台目标使用登台应用程序图标，请打开MyApp Staging target登台MyApp Staging target然后选择AppIcon-Staging作为App Icon Source 。
添加适用于Android的应用程序图标 (Add app icon for Android)
I like to switch to Project view, as it is easier to change app icons. Click res -> New -> Image Asset to open Asset Studio. We can use the same app icons that we used in iOS:
我喜欢切换到“项目”视图，因为更改应用程序图标更加容易。 单击res -> New -> Image Asset打开Asset Studio。 我们可以使用与iOS中相同的应用程序图标：
Android 8.0 (API level 26) introduced Adaptive Icons so we need to tweak the Resize slider to make sure our app icons look as nice as possible.
Android 8.0(API级别26)引入了自适应图标，因此我们需要调整“调整大小”滑块以确保我们的应用程序图标看起来尽可能美观。
Android 8.0 (API level 26) introduces adaptive launcher icons, which can display a variety of shapes across different device models. For example, an adaptive launcher icon can display a circular shape on one OEM device, and display a squircle on another device. Each device OEM provides a mask, which the system then uses to render all adaptive icons with the same shape. Adaptive launcher icons are also used in shortcuts, the Settings app, sharing dialogs, and the overview screen. — Android developers
Android 8.0(API级别26)引入了自适应启动器图标，可以在不同设备型号之间显示各种形状。 例如，自适应启动器图标可以在一个OEM设备上显示圆形，而在另一设备上显示松鼠。 每个设备OEM都提供一个遮罩，然后系统将使用该遮罩来渲染具有相同形状的所有自适应图标。 自适应启动器图标还用于快捷方式，“设置”应用程序，共享对话框和概述屏幕中。 -Android开发人员
We are doing for production first, which means the main Res Directory. This step will replace the existing placeholder app icons generated by Android Studio when we bootstrapped React Native projects.
我们首先要进行生产，这意味着main Res目录。 当我们引导React Native项目时，此步骤将替换由Android Studio生成的现有占位符应用程序图标。
Now that we have production app icons, let’s make staging app icons. Android manages code and assets via convention. Click on src -> New -> Directory and create a staging folder. Inside staging, create a folder called res . Anything we place in staging will replace the ones in main — this is called source sets.
现在我们有了生产应用程序图标，让我们制作临时应用程序图标。 Android通过约定管理代码和资产。 单击src -> New -> Dir New- src -> New -> Dir ectory并创建ate as标记文件夹。 在暂存过程中，创建一个all文件夹。 任何事情，我们解放军ce in s taging将取代上es i N主-此为c alled sourc e设定。
You can read more here: Build with source sets.
您可以在此处阅读更多内容： 使用源集构建 。
You can use source set directories to contain the code and resources you want packaged only with certain configurations. For example, if you are building the “demoDebug” build variant, which is the crossproduct of a “demo” product flavor and “debug” build type, Gradle looks at these directories, and gives them the following priority:
您可以使用源集目录仅包含要与某些配置打包在一起的代码和资源。 例如，如果要构建“ demoDebug”构建变体，它是“ demo”产品风味和“ debug”构建类型的交叉产物，则Gradle会查看这些目录，并赋予它们以下优先级：
src/demoDebug/(build variant source set)
src/demoDebug/(构建变体源集)
src/debug/(build type source set)
src/debug/(构建类型源集)
src/demo/(product flavor source set)
src/demo/(产品风味源集)
src/main/(main source set)
src/main/(主要来源集)
Right click on staging/res -> New -> Image Asset to make app icons for staging. We also use the same staging app icons like in iOS, but this time we choose staging as Res Directory. This way Android Studio knows how to generate different ic_launcher and put them into staging.
右键单击staging/res -> New -> Image资产以制作用于暂存的应用程序图标。 我们还使用与iOS中相同的登台应用程序图标，但是这次我们选择将hoose s标记为Res Directory。 这样，Android Studio就会知道如何生成erent ic_la uncher并将其into s标记中。
添加iOS的启动屏幕 (Add launch screen for iOS)
The splash screen is called a Launch Screen in iOS, and it is important.
A launch screen appears instantly when your app starts up. The launch screen is quickly replaced with the first screen of your app, giving the impression that your app is fast and responsive
当您的应用启动时，启动屏幕会立即出现。 启动屏幕Swift替换为应用程序的第一个屏幕，给人的印象是您的应用程序快速且响应Swift
In the old days, we needed to use static launch images with different sizes for each device and orientation.
过去，我们需要针对每个设备和方向使用大小不同的静态启动图像。
启动屏幕故事板 (Launch Screen storyboard)
For now the recommended way is to use Launch Screen storyboard . The iOS project from React Native comes with LaunchScreen.xib but xib is a thing of the past. Let’s delete it and create a file called Launch Screen.storyboard .
目前，推荐的方法是使用“ Launch Screen storyboard 。 React Native的iOS项目带有LaunchScreen.xib但xib已经成为过去。 让我们删除它并创建一个名为Launch Screen.storyboard的文件。
Right click on MyApp folder -> New and chose Launch Screen, add it to both targets as usually we show the same splash screen for both staging and production.
右键单击MyApp文件夹->新建，然后选择启动屏幕，将其添加到两个目标中，因为通常我们会在登台和生产中显示相同的启动屏幕。
影像集 (Image Set)
Open asset catalog, right click and select New Image Set . We can name it anything. This will be used in the Launch Screen.storyboard.
打开资产目录，右键单击并选择New Image Set 。 我们可以命名任何东西。 这将在Launch Screen.storyboard 。
Open Launch Screen.storyboard and add an UIImageView . If you are using Xcode 10, click the Library button in the upper right corner and choose Show Objects Library.
打开Launch Screen.storyboard并添加UIImageView 。 如果您使用的是Xcode 10，请单击右上角的“库”按钮，然后选择“ Show Objects Library 。
Set image for Image View, and make sure Content Mode is set to Aspect Filled, as this ensures that the image always covers the full screen (although it may be cropped). Then connect ImageView using constraints to the View, not the Safe Area. You do this by Control+drag from the Image View (splash) to the View.
为“图像视图”设置图像，并确保将“ Content Mode设置为“ Aspect Filled ，因为这样可以确保图像始终覆盖全屏(尽管可能会被裁剪)。 然后使用约束将ImageView连接到View ，而不是Safe Area 。 您可以通过Control+drag从“图像视图”(启动画面) Control+drag “ View 。
无边距约束 (Constrains without margin)
Click into each constraint and uncheck Relative to Margin. This makes our ImageView pin to the very edges of the view and with no margin at all.
单击进入每个约束，然后取消选中Relative to Margin 。 这使我们的ImageView固定在视图的最边缘，完全没有空白。
Now go to both targets and select Launch Screen.storyboard as Launch Screen File:
现在转到两个目标，然后选择Launch Screen.storyboard作为Launch Screen File ：
On iOS, the launch screen is often cached, so you probably won’t see the changes. One way to avoid that is to delete the app and run it again.
在iOS上，启动屏幕通常会被缓存，因此您可能看不到更改。 避免这种情况的一种方法是删除应用程序，然后再次运行。
为Android添加启动器主题 (Add a launcher theme for Android)
There are several ways to add splash screen for Android, from using launcher themes, Splash Activity, and a timer. For me, a reasonable splash screen for Android should be a very minimal image.
有几种 方法可以使用启动器主题，启动活动和计时器来为Android添加启动屏幕。 对我来说，适用于Android的初始屏幕应该是非常小的图像。
As there are many Android devices with different ratios and resolutions, if you want to show a full screen splash image, it will probably not scale correctly for each device. This is just about UX.
由于许多Android设备具有不同的比率和分辨率，因此，如果要显示全屏启动图像，则可能无法针对每个设备正确缩放。 这只是关于UX。
For the splash screen, let’s use the launcher theme with splash_background.xml .
对于启动屏幕，让我们将启动器主题与splash_background.xml一起splash_background.xml 。
了解设备指标 (Learn about Device Metric)
There is no single splash image that suits all Android devices. A more logical approach is to create multiple splash images for all common resolutions in portrait and landscape. Or we can design a minimal splash image that works. You can find more info here: Device Metric.
没有适合所有Android设备的单个启动图像。 一种更合乎逻辑的方法是为纵向和横向的所有常用分辨率创建多个启动图像。 或者，我们可以设计一个最小的启动图像。 您可以在此处找到更多信息： Device Metric 。
Here is how to add splash screen in 4 easy steps:
以下是通过四个简单步骤添加初始屏幕的方法：
添加启动画面 (Add splash image)
We usually need a common splash screen for both staging and production. Drag an image into main/res/drawble . Android Studio seems to have a problem with recognising some jpg images for the splash screen, so it’s best to choose png images.
对于登台和生产，我们通常都需要一个通用的启动画面。 将图像拖到main/res/drawble 。 Android Studio在识别初始屏幕的一些jpg图像时似乎存在问题，因此最好选择png图像。
添加splash_background.xml (Add splash_background.xml)
Right click on drawable -> New -> Drawable resource file . Name it whatever you want — I choose splash_background.xml . Choose the root element as layer-list:
Right click on drawable -> New -> Drawable resourc文件。 随便命名即可—我选择了hoose splash_backgrou nd.xml。 选择根nt as laye单：
A Layer List means “a Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index is drawn on top”. Here is how splash_background.xml looks like:
层列表表示“管理其他可绘制对象数组的可绘制对象”。 这些是按数组顺序绘制的，因此索引最大的元素被绘制在顶部。” 这是splash_background.xml样子：
<?xml version="1.0" encoding="utf-8"?><!-- The android:opacity=”opaque” line — this is critical in preventing a flash of black as your theme transitions. --><layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"> <!-- The background color, preferably the same as your normal theme --> <item android:drawable="@android:color/white"/> <!-- Your splash image --> <item> <bitmap android:src="@drawable/iron_man" android:gravity="center"/> </item></layer-list>Note that we point to our splash image we added earlier with android:src=”@drawable/iron_man”.
请注意，我们指向我们之前使用android:src=”@drawable/iron_man”添加的启动图像。
宣告风格 (Declare style)
Open styles.xml and add SplashTheme:
打开styles.xml并添加SplashTheme ：
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowBackground">@drawable/splash_background</item></style> Use SplashTheme (Use SplashTheme)
Go to Manifest.xml and change the theme of the the launcher activity, which has category android:name="android.intent.category.LAUNCHER" . Change it to android:theme="@style/SplashTheme" . For React Native, the launcher activity is usually MainActivity . Here is how Manifest.xml looks:
转到Manifest.xml并更改启动程序活动的主题，该活动的category android:name="android.intent.category.LAUNCHER" 。 将其更改为android:theme="@style/SplashTheme" 。 对于React Native，启动器活动通常是MainActivity 。 这是Manifest.xml looks ：
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.myapp"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="false" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:theme="@style/SplashTheme" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application></manifest>Run the app now and you should see the splash screen showing when the app starts.
立即运行该应用程序，您将看到启动应用程序时显示的初始屏幕。
管理环境配置 (Managing environment configurations)
The differences between staging and production are just about app names, application ids, and app icons. We probably use different API keys, and backend URL for staging and production.
暂存和生产之间的区别仅在于应用程序名称，应用程序ID和应用程序图标。 我们可能使用不同的API密钥以及后端URL进行登台和生产。
Right now the most popular library to handle these scenarios is react-native-config, which is said to “bring some 12 factor love to your mobile apps”. It requires lots of steps to get started, and I hope there is a less verbose solution.
目前，处理这些情况的最流行的库是react-native-config ，据说可以“给您的移动应用带来12点好处”。 它需要很多步骤才能开始，我希望有一个更详细的解决方案。
从这往哪儿走 (Where to go from here)
In this post, we touched Xcode and Android Studio more than Visual Studio Code, but this was inevitable. I hope this post was useful to you. Here are some more links to read more about this topic:
在本文中，我们对Xcode和Android Studio的接触远超过Visual Studio Code，但这是不可避免的。 希望这篇文章对您有用。 以下是一些更多链接，以了解有关此主题的更多信息：
Add App Icons and Launch Screens to React Native Apps (iOS & Android)
How to Add a Splash Screen to a React Native App (iOS and Android)
Adding multiple target pipelines for React Native Apps (and Fastlane CircleCI deployment) pt. 1
If you like this post, consider visiting my other articles and apps ?