列表项头像不显示

Question

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

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

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

如何让照片显示为手机头像？

Answer 1

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

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

Answer 2

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

稳定版

或者

avatar={{ uri: item.icon }}

或

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

测试版

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

Answer 3

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

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

列表项头像不显示

ListItem Avatar Not Displaying

listviewitem

react-native

react-native-flatlist

稳定版

测试版