React Native列表未填充内容求助：项数匹配数组但内容为空

看起来你的friends数据是完全正常的（日志里能看到每个对象都有正确的name和avatar_url），但列表项显示为空，我帮你梳理几个最可能的原因和解决办法：

1. 检查ListItem组件的属性命名是否正确 #

你应该是用的react-native-elements的ListItem组件吧？这个组件的头像属性在很多版本里需要用leftAvatar而不是直接写avatar，试试修改这部分代码：

<ListItem 
  roundAvatar 
  leftAvatar={{uri: l.avatar_url}} // 将avatar改为leftAvatar
  key={i} 
  onPress={() => {this.clickedFriend(l)}} 
  title={l.name} 
  rightIcon={<Icon style={{alignSelf: 'center'}} size={25} name={l.selected ? "check-circle-o" : "times-circle-o"}/>} 
/>

很多开发者会在这里踩坑，因为组件文档的属性名可能随版本变化，avatar属性有时候是用来设置自定义头像组件，而不是直接传入图片地址。

2. 排查样式导致的内容隐藏 #

有可能是样式设置导致内容看不见：

• 检查styles.container、Content或ScrollView有没有设置opacity: 0、display: none这类属性
• 确认ListItem的文字颜色和背景色是否一致，比如白色文字在白色背景上就会看不见
• 检查ListItem的高度是否被设置为0，或者overflow: hidden截断了内容

3. 用原生组件验证数据传递 #

先暂时替换掉ListItem，用React Native原生的View、Text、Image组件测试，确认数据能正常渲染：

{ this.state.friends.map((l, i) => {
  return(
    <View key={i} style={{flexDirection: 'row', alignItems: 'center', padding: 10}}>
      <Image source={{uri: l.avatar_url}} style={{width: 40, height: 40, borderRadius: 20}} />
      <Text style={{marginLeft: 10}}>{l.name}</Text>
      <Icon style={{marginLeft: 'auto'}} size={25} name={l.selected ? "check-circle-o" : "times-circle-o"}/>
    </View>
  )
})}

如果原生组件能正常显示内容，那问题肯定出在ListItem组件的使用上，比如属性错误、版本兼容问题。

4. 确认状态更新的正确性 #

虽然日志显示数据存在，但要确保你是通过setState来更新friends状态的，直接修改this.state不会触发组件重新渲染：

// 正确的写法
this.setState({ friends: newFriendsData });

// 错误的写法（不会触发渲染）
this.state.friends = newFriendsData;

先从第一个方法开始试，修改leftAvatar属性，这是最常见的解决办法。如果还是不行，用原生组件测试缩小问题范围。

内容的提问来源于stack exchange，提问作者SwimmingG