ListHeaderComponentを使用してフラットリストの画面の中央に空のメッセージを表示する

Question

FlatListのListEmptyComponentをサポートしていないReact-Nativeバージョン0.43.0を使用しています。したがって、私はあなたがイメージから見ることができるようにテキストを垂直に

任意のアイデアを中心にされていない、リストが空の時にビューをレンダリングするために

import React, { Component } from 'react'; 
import { Text, View, StyleSheet,FlatList } from 'react-native'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     listData: [] 
    } 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <FlatList 
      renderItem={() => null} 
      data={this.state.listData} 
      ListHeaderComponent={() => (!this.state.listData.length? 
      <Text style={styles.emptyMessageStyle}>The list is empty</Text> 
      : null) 
      } 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex:1 
    }, 
    emptyMessageStyle: { 
    textAlign: 'center', 
    //My current hack to center it vertically 
    //Which does not work as expected 
    marginTop: '50%', 
    } 
}); 

をListHeaderComponentを使用していますどのようにFlatListの中でそれを中心に置くのですか？

私はすでにjustifyContent、alignItemsなどを適用しようとしましたが、使用は試みていません。

これはsnack.expoへのリンクです - https://snack.expo.io/S16dDifZf

Answer 1

あなたはFlatListにスタイルを追加することができます。

const styles = StyleSheet.create({ 
    container: { 
    flex:1 
    }, 
    listStyle: { 
    justifyContent: 'center' 
    }, 
    emptyMessageStyle: { 
    textAlign: 'center', 
    } 

}); 

    render() { 
    return (
     <View style={styles.container}> 
     <FlatList style={styles.listStyle} 
      renderItem={() => null} 
      data={this.state.listData} 
      ListHeaderComponent={() => (!this.state.listData.length ? 
      <Text style={styles.emptyMessageStyle}>The list is empty</Text> 
      : null)} 
     /> 
     </View> 
    ); 
    } 

これは、リストが空でない場合、リスト内の項目を中央に配置します。空でないスタイルを好まない場合は、別のスタイルを適用する必要があります（リストが空でない場合）。

Link to snack.expo

別のオプション - FlatListスタイルを変えずに - 条件付きthis.state.listData.length

render() { 
    return (
     <View style={styles.container}> 
     { 
      this.state.listData.length? 

      (<FlatList 
      renderItem={() => null} 
      data={this.state.listData} 
      />) 
      : 
      (
      <View style={styles.emptyListStyle}> 
       <Text style={styles.emptyMessageStyle}>The list is empty</Text> 
      </View> 
     ) 
     } 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex:1 
    }, 
    emptyListStyle: { 
    flex: 1, 
    justifyContent: 'center' 
    }, 
    emptyMessageStyle: { 
    textAlign: 'center', 
    } 

}); 

This is the snack.expo