React Native中ListView/FlatList数据正常但条目不显示问题

• 第一个原因：React Native Elements 版本适配问题

  如果你使用的是 v4 及以上版本的 react-native-elements，ListItem 组件的 API 发生了破坏性变更，不再支持直接传入 title、subtitle 作为属性，必须使用嵌套的子组件实现，旧写法会直接导致文字不显示。
  修正后的 renderItem 写法示例：

  renderItem={({ item, index }) => {
    return (
      <ListItem
        containerStyle={styles.listItem}
        bottomDivider
      >
        <ListItem.Avatar
          size="large"
          rounded={false}
          // source={item.image && { uri: item.image }}
        />
        <ListItem.Content>
          <ListItem.Title style={styles.titleStyle}>{item.name}</ListItem.Title>
          <ListItem.Subtitle style={styles.subtitleStyle}>
            Ingredients: {item.ingredients}     Calories: {item.calories}
          </ListItem.Subtitle>
        </ListItem.Content>
      </ListItem>
    );
  }}
  

• 第二个原因：样式配置异常
  • 检查 styles.container 是否设置了 flex: 1，父容器未设置 flex 属性会导致 FlatList 高度计算异常，内容被挤压隐藏
  • 临时移除 titleStyle、subtitleStyle、containerStyle 自定义样式测试，排查是否存在文字颜色和背景色一致、高度设置过小、内边距过大把文字挤出可视区域的问题
• 第三个原因：组件配置冲突
  可以先完全删除 leftAvatar 属性测试，部分版本的组件在未配置 avatar 资源时，会占用全部行宽挤压文本区域，导致文字不可见
• 第四个原因：数据字段校验
  可先将 title 替换为固定字符串 "测试文本" 测试，如果固定文本可以显示，再确认 item 对象的字段名是否完全匹配，是否存在大小写、拼写错误的问题

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