ListItem 头像不显示答案

【问题标题】：ListItem Avatar Not DisplayingListItem 头像不显示
【发布时间】：2018-11-27 07:27:47
【问题描述】：

作为FlatList 的一部分，我渲染每个ListItem（来自react-native-elements 库），我尝试在其中显示从网址到照片的头像（图标）：

  <ListItem
     avatar={{ source: { uri: item.icon } }} 
   />

所有其他道具都显示正常，但在每个单元格的左侧我只得到一个灰色框。我已经记录了item.icon 的值，它指向一张有效的照片。我需要下载照片然后提供本地链接吗？

如何让照片显示为单元格的头像？

【问题讨论】：

您是否使用任何库或 ListItem 是您的自定义组件，如果是自定义组件，请发布其代码以便更好地理解
来自react-native-elements
试试avatar={{ uri: item.icon }}
成功了！你知道avatar 和leftAvatar 之间的区别是什么吗？
leftAvatar 处于测试版，avatar 处于稳定版（根据文档）。

标签： react-native listviewitem react-native-flatlist

【解决方案1】：

您为图像头像使用了错误的对象。

稳定版

任一

avatar={{ uri: item.icon }}

或

avatar={<Avatar
           rounded
           source={{uri: item.icon}}
           title={'Sample Title'}
       />}

测试版

leftAvatar={{ source: { uri: item.icon } }}

【讨论】：

【解决方案2】：

根据 react-native-elements 他们有 leftAvatar 而不仅仅是 avatar

<ListItem
        key={i}
        leftAvatar={{ source: { uri: l.avatar_url } }}
        title={l.name}
        subtitle={l.subtitle}
      />

【讨论】：

只是为了测试它是否获得了你的道具，尝试在你的 leftAvatar 对象中添加这个 rounded: true
当我使用leftAvatar= 时，我什么也得不到，但是当我使用avatar= 时，我得到一个没有圆角的灰色框。
对我来说 leftAvatar 使用本地图像，并获得带有外部 url 的灰色框
在 expo web 视图中为我工作，但在我的移动设备上，我得到一个没有图像的灰色圆形头像。尝试在本地和从网络调用图像。

【解决方案3】：

这就是我用图标（react-native-elements / flatlist）自定义我的leftAvatar所做的

 leftAvatar={{
        icon: { name: item.icon, type: "ionicon", color: "black" },
        size: "large",
        overlayContainerStyle: { backgroundColor: "white" }
      }}

【讨论】：