React Native FlatList - 呈现具有动态大小的列表项

Question

我目前正在概述一个应用程序，该应用程序的提要最终将具有与 Instagram 相似的结构（包含下方带有文本的图像的卡片）。我概述了一个基本组件，现在正尝试在 FlatList 中呈现它。该组件应如下所示：

但是，当我在 FlatList 中渲染它时，它看起来像这样：

此外，当我尝试滚动时，滚动视图会弹回顶部。我觉得这个问题是由我的 listItem 的样式引起的，但我不知道出了什么问题/如何解决它。

这是我用来设置 ListItem 样式的代码：

import EStyleSheet from 'react-native-extended-stylesheet';

export default EStyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5fcff',
        alignItems: 'center'
    },
    listing: {
        backgroundColor: 'blue',
        height: '60%',
        width: '90%',
        marginTop: 20,
        marginBottom: 20,
        flexDirection: 'column',

        justifyContent: 'flex-start',

    },
    listingImage: {
        backgroundColor: 'red',
        // flexDirection: 'column',
        // alignItems: 'flex-start',
        flex: 0.8
    },
    listingInfo: {
        backgroundColor: 'green',
        flex: 0.2,
        flexDirection: 'row',
        justifyContent: 'flex-start',
    },
    hostImg: {
        backgroundColor: '#0FFFA4',
        flex: 0.3
    },
    listingText: {
        backgroundColor: 'pink',
        flex: 0.7,
        flexDirection: 'column',

    },
    listingTitle: {
        backgroundColor: '#0FD4FA',
        flex: 1,
    },
    otherInfo: {
        backgroundColor: 'orange',
        flex: 1
    }
});

要定义 ListItem：

import PropTypes from 'prop-types';
import React from 'react';
import { View, Text } from 'react-native';

import styles from './styles';

const Listing = ({ children }) => {

    return (
            <View style={styles.listing}>
                <View style={styles.listingImage}>


                </View>
                <View style={styles.listingInfo}>
                    <View style={styles.hostImg}>

                    </View>
                    <View style={styles.listingText}>
                        <View style={styles.listingTitle}>

                        </View>
                        <View style={styles.otherInfo}>

                        </View>
                    </View>
                </View>
            </View>

    );
};

Listing.propTypes = {
    children: PropTypes.any,
};

export default Listing;

最后是 Feed 视图的代码：

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

import { Listing } from '../../components/Cards';
import { FeedSeparator } from '../../components/Separators';

type Props = {};
export default class Feed extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.titleStyle}> Feed </Text>
                </View>
                <View style={styles.listContainer}>

                    <FlatList
                        style = {{ flex: 1 }}
                        data={[
                            'a',
                            'b',
                            'c',
                            'd',
                            'e',
                            'f',
                            'g'
                        ]}
                        renderItem={({ item }) => (
                            <Listing/>
                        )}
                        keyExtractor={item=>item}
                        ItemSeparatorComponent={FeedSeparator}
                    />
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5fcff',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    header: {
        height: 80,
        paddingTop: 30,
        width: '100%',
        backgroundColor: '#DDF1AD',
        flexDirection: 'row',
        justifyContent: 'center'

    },
    titleStyle: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    listContainer: {
        flex: 1,
        backgroundColor: 'blue',
        marginTop: 14,
        alignSelf: 'stretch'

    }
});

感谢您的帮助！

Answer 1

如果你想拥有动态高度，你需要使用 react-native 的 Dimensions 模块。它可以让您访问正在使用应用程序的设备的高度和宽度。

1. 进口：

   import { Dimensions } from 'react-native'

2. 解构：

   const { height, width } = Dimensions.get('window')

现在您有了使用您的应用程序的设备的高度和宽度。例如，您可以将这些值设置为组件的状态。