使用动态图标将项目添加到列表答案

【问题标题】：Add item to list with dynamic icon使用动态图标将项目添加到列表
【发布时间】：2020-11-04 16:57:09
【问题描述】：

当用户将新数据添加到列表中时，我想在 react native 中动态添加图标（通常是社交图标）。例如，当用户添加名称为 facebook 的项目时，应在后台将 facebook 图标添加到列表中（项目名称可能是 face、fcb 等）我该如何实现这个逻辑？

【问题讨论】：

标签： react-native icons

【解决方案1】：

您的问题很模糊，但我猜您正在寻找所谓的“条件渲染”。

<View>
  {someCondition &&
    <FacebookIcon />
  }
</View>

FacebookIcon 组件只有在 someCondition 为真时才会被渲染。因此，在您的情况下，您可能希望根据您的“列表”是否包含您想要的数据来确定一个是真还是假的变量，并使用该变量来确定是否显示图标。

如果您希望图标是动态的（例如，能够拥有 Facebook、Insta、Whatsapp），您可以使用另一个变量来保存您已识别的社交网络，并将其作为道具传递给图标组件：

const listSocialNetwork = 'facebook' // or whatever you find in your list
const showIcon = !!listSocialNetwork // true if a social network was found in the list

// in your render

<View>
  {showIcon &&
    <SocialIcon socialNetwork={listSocialNetwork} />
  }

</View>

【讨论】：

谢谢，我试试