【问题标题】:Limit accordion content inside React Native Flatlist限制 React Native Flatlist 中的手风琴内容
【发布时间】:2019-11-01 04:56:27
【问题描述】:

我想限制在 FlatList 中呈现的初始项目数量。在 FlatList 中,我使用的是 Accordion。当我打开 FlatList 时,它显示了许多手风琴,即使我确实有一个带有两个标题的手风琴。我正在使用 react native collapsible。这是我的手风琴内容:

const SECTIONS = [
{
    title: 'First',
    content: 'First World',
},
{
    title: 'Second',
    content: 'Second World',
},

];

这是我的平面列表

 return (
        <FlatList
            style={styles.container}
            data={orders}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({item}) =>
                <MyOrdersItem {...item} />
            }
            initialNumToRender={1}
            maxToRenderPerBatch={1}
            onEndReachedThreshold={0.5}

        />
    );

我的 OrdersItem 是我使用 Accordion 的地方。 这是我得到的结果:

【问题讨论】:

标签: javascript reactjs react-native react-native-flatlist


【解决方案1】:

您的 FlatList 数据道具应该是 SECTIONS,而不是订单。

return (
    <FlatList
        style={styles.container}
        data={SECTIONS}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) =>
            <MyOrdersItem {...item} />
        }
        initialNumToRender={1}
        maxToRenderPerBatch={1}
        onEndReachedThreshold={0.5}

    />
);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-01-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-30
    • 1970-01-01
    相关资源
    最近更新 更多