React Native FlatList-使用动态大小呈现列表项

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
    }
});

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;

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'

    }
});