代码之家 › 专栏 › 技术社区 › KaplanAlex

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

react-native-flatlist flexbox react-native

KaplanAlex · 技术社区 · 7 年前

我目前正在概述一个应用程序,它有一个feed,最终将具有与Instagram类似的结构(包含下面有文本的图像的卡片)。我概述了一个基本组件,现在正试图在平面列表中呈现它。组件应如下所示:

但是,当我在平面列表中渲染它时,它看起来是这样的:

此外,当我尝试滚动时,滚动视图会反弹到顶部。我觉得这个问题是由于我的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;

最后是提要视图的代码:

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'

    }
});

谢谢你的帮助!

1 回复 | 直到 7 年前

Eduard 7 年前

如果希望具有动态高度,则需要使用 Dimensions react native模块。它将允许您访问应用程序所在的设备的高度和宽度。

导入:

import { Dimensions } from 'react-native'
分解结构:

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

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