React Native中FlatList空状态图片垂直居中问题求助

问题原因 #

FlatList 默认情况下，其内容容器不会自动填充可用的垂直空间。即使你的 emptyListContainer 设置了 flex:1、alignItems:center 和 justifyContent:center，由于父容器（FlatList 的内容容器）没有足够的高度，导致垂直居中无法生效。

解决方法 #

给 FlatList 添加 contentContainerStyle={{ flexGrow: 1 }} 属性，让内容容器扩展以填充 FlatList 的全部可用空间，这样空状态组件就能垂直居中了。

修改后的关键代码片段 #

<FlatList
  style={{flex:1}}
  keyExtractor={item => item.id}
  data={list}
  renderItem={({ item }) => renderItem({item})}
  ListEmptyComponent={renderEmpty}
  onEndReachedThreshold={0.2}
  contentContainerStyle={{ flexGrow: 1 }} // 新增该行
/>

完整修改后的代码 #

import { 
    StyleSheet,
    SafeAreaView,
    FlatList,
    TouchableOpacity,
    View,
    Text,
    Image
} from 'react-native';

export default function App() {

    const list = [];

    const renderEmpty = () => (
        <View style={styles.emptyListContainer}>
            <Image
                source={require('./assets/empty-list.png')}
                style={styles.emptyListImage}
            />
            <Text style={styles.emptyListText}>No content</Text>
        </View>
    );

    const renderItem = ({ item, index }) => {
        return (
            <View style={styles.listItem}>
                <View style={styles.itemContainer}>
                    <TouchableOpacity>
                        <Text style={styles.item}>{item.nome}</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }


  return (
    <SafeAreaView style={styles.container}>
      <View style={{flex: 1}}>
        <FlatList
          style={{flex:1}}
          keyExtractor={item => item.id}
          data={list}
          renderItem={({ item }) => renderItem({item})}
          ListEmptyComponent={renderEmpty}
          onEndReachedThreshold={0.2}
          contentContainerStyle={{ flexGrow: 1 }}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:15,
    },
    listItem:{
        elevation: 5,
        width:"95%",
        margin: 3,
        marginBottom: 7,
        flex: 1,
        alignSelf:"center",
        flexDirection:"row",
        borderRadius:5
    },
    itemContainer: {
        flex: 1,
        padding: 20,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center"
    },
    item: {
        color: 'black',
        fontWeight: "800", 
        fontSize: 24,
        fontFamily: 'helvetica'
    },
    emptyListContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    emptyListImage: {
        width: 200,
        height: 200,
    },
    emptyListText: {
        fontSize: 18,
        fontWeight: 'bold',
        marginTop: 20,
    }       
});

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