React Native FlatList无法渲染来自Props的数据问题

兄弟，我之前也遇到过一模一样的情况——props打印正常但FlatList就是空白，大概率是这几个细节没处理到位，你挨个排查下：

• 给FlatList加上keyExtractor
  React Native的FlatList必须要有唯一的key来标识每个列表项，虽然默认会用索引，但很容易导致渲染异常。直接加个keyExtractor属性就行：

  <FlatList
    data={this.props.data}
    keyExtractor={(item, index) => index.toString()}
    // 如果你的item里有唯一ID比如id，用这个更稳定：keyExtractor={(item) => item.id.toString()}
    renderItem={({item}) => <Text>{item.videoURL}</Text>}
  />
  

• 给父View设置flex:1
  你现在的父View没有任何样式，React Native的布局默认是“包裹内容”，FlatList可能没有足够的空间展示。给View加个flex:1让它占满屏幕：

  render() {
    return (
      <View style={{flex: 1}}>
        <FlatList
          data={this.props.data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({item}) => <Text>{item.videoURL}</Text>}
        />
      </View>
    );
  }
  

• 验证item.videoURL是否真的有内容
  有时候console.log的data看起来正常，但某个item的videoURL是空字符串或者undefined，导致Text啥也不显示。可以先给Text加个默认值测试：

  renderItem={({item}) => <Text>{item.videoURL || '没有视频链接'}</Text>}
  

• 检查Text的颜色
  别笑，真的有过Text颜色和背景色一模一样的情况！给Text加个明显的颜色试试：

  renderItem={({item}) => <Text style={{color: '#333'}}>{item.videoURL}</Text>}
  

一般来说，前两个点就能解决大部分FlatList空白的问题，你先试试~

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