如何为React Native App添加自定义标签栏图标
似乎超级容易。 毕竟，我们每天都能看到它-对于React Native应用程序而言， 简单的标签栏图标竟然难以实现。
在尝试查找资产，对其进行编辑，然后将其供应用程序使用之间，这并不是那么容易。 我没有可以在网上轻松找到的简单的端到端指南。 因此，我在这里为世界和未来写这篇文章。未来乔纳森无疑将再次遇到这个问题。
问题
只是为了措辞：标签栏位于底部。 状态栏是最上面的那个，上面写着日期，电池寿命等。导航栏是这两个之间的一个，其中包含有关屏幕内容的信息。
（导航栏还包含您可能会触摸的模式屏幕等按钮）
React Native和iOS为您提供了许多“系统”图标。 您将从iPhone上的默认应用程序识别它们。 根据文档，它们是：
枚举“最高评分”）
这些功能广泛，但对大多数应用程序无用。 更不用说如果您在iOS系统上实现它们，则不仅会得到标准图标，而且其下方的文本也无法自定义。 系统图标也很丑陋。
许多应用都有自定义图标。 那么我们如何为自己的应用程序实现它呢？
解
实现这一目标的过程分为两个部分：图标（图像）和标题（文本）。 两者都需要填写。
查找图标的图像非常困难。 我最终使用了Canva.com的标准插图集。 我创建了一个72x72px大小的设计（这是我从Apple的HIG中读取的最大允许值），然后将其拍到一个简单的图标上。 我下载了带有白色背景的PNG（因为我没有付费帐户），然后在OS X上使用“预览”功能将白色拼出了透明的背景。
之后，我将其放入特定的文件夹中，并要求将其放入代码中的TabBarIOS.Item中：
<TabBarIOS.Item
icon={require('./assets/chat.png')}
title="Chat"
请注意，React Native的require适用于PNG和非JS文件。 这真的不像标准的webpack（我最熟悉）的行为，所以我认为我应该在这里提一下。
记下文件名。 当我第一次刷新并看到图标时。 真是巨大！ 在阅读了这个随机的Github问题后，我意识到可以通过将图标文件的名称从’chat.png’更改为’chat@3x.png’来解决此问题。 这是因为72px x 72px的大小仅与视网膜文件有关。
刷新，瞧！
结论
希望对您有帮助。 我知道这将是未来的乔纳森，那笨拙而健忘的白痴。