当数据为空时，React-Native FlatList 呈现零状态

Question

数据为空时是否可以渲染替代组件？我不会只呈现列表或不呈现列表的唯一原因是 ListHeaderComponent在这两种情况下都是必需的( data.length 和 !data.length )...

const data = []
<FlatList
  contentContainerStyle={styles.list}
  data={data} // if empty or !data.length render <ZeroComponent/>

Answer 1

更新
react-native 最近添加 ListEmptyComponent

const data = []
_listEmptyComponent = () => {
    return (
        <View>
            // any activity indicator or error component
        </View>
    )
}

<FlatList
    data={data}
    ListEmptyComponent={this._listEmptyComponent}
    contentContainerStyle={styles.list} 
/>

const data = []

renderFooter = () => {
  if (data.length != 0) return null;


  return (
    <View>
      // any activity indicator or error component
    </View>
   );
};

<FlatList
    contentContainerStyle={styles.list}
    data={data}
    ListFooterComponent={this.renderFooter}
/>

希望这可以帮助