将带有条件的 ScrollView 转换为 Flatlist答案

【问题标题】：Convert ScrollView with condition to Flatlist将带有条件的 ScrollView 转换为 Flatlist
【发布时间】：2021-03-03 14:14:16
【问题描述】：

我需要将此滚动视图转换为平面列表，但由于我没有自己编写代码，所以完全卡住了。

matchesRound 是一个列表，但是当我们映射它时我似乎无法弄清楚配置文件包含，我认为我可以从matchesRound 中创建一个常量并将其用作平面列表中的数据？

<ScrollView
                        {!user.settings.hidden &&
                            matchesRound
                                .sort((a, b) => {
                                    const aLength = a.relation.questions.length;
                                    const bLength = b.relation.questions.length;
                                    if (aLength === 0 && bLength > 0) return -1;
                                    if (aLength > 0 && bLength === 0) return 1;
                                    if (aLength === 0 && bLength === 0)
                                        return b.relation.updatedAt - a.relation.updatedAt;
                                    const aLastQuestion = a.relation.questions[aLength - 1];
                                    const bLastQuestion = b.relation.questions[bLength - 1];
                                    const aHasAnswered =
                                        !!aLastQuestion[user.id] && !aLastQuestion[getOtherUserId(a.relation, user.id)];
                                    const bHasAnswered =
                                        !!bLastQuestion[user.id] && !bLastQuestion[getOtherUserId(b.relation, user.id)];
                                    if (!aHasAnswered && bHasAnswered) return -1;
                                    if (aHasAnswered && !bHasAnswered) return 1;
                                    return aLastQuestion.time - bLastQuestion.time;
                                })
                                .map((profile, i) => {
                                    return (
                                        <>
                                            {i == 0 && <View style={{ width: 6 }} />}
                                            <GameCard
                                                key={i + "profile"}
                                                superDM={!!getUserStatus(profile.relation, user.id).superDM}
                                                prime={getUserStatus(profile.relation, user.id).thanksToPrime}
                                                profile={profile}
                                                onPress={() => navigation.navigate("Rounds", { profile: profile })}
                                            />
                                        </>
                                    );
                                })}
                        {(matchesRound.length === 0 || user.settings.hidden) &&
                            [0, 1, 2].map(key => (
                                <>
                                    {key == 0 && <View style={{ width: 6 }} />}
                                    <GameCardEmpty key={key + "gameCards"} />
                                </>
                            ))}
                    </ScrollView>

【问题讨论】：

标签： react-native scrollview react-native-flatlist

【解决方案1】：

我建议您将数组排序到其他地方（例如在 useEffect 中），然后像这样简单地使用您的 FlatList

<FlatList
data={matchesRound}
renderItem={(profile) => {
    return(
        <GameCard
            key={profile.index + "profile"}
            superDM={!!getUserStatus(profile.item.relation, user.id).superDM}
            prime={getUserStatus(profile.item.relation, user.id).thanksToPrime}
            profile={profile}
            onPress={() => navigation.navigate("Rounds", { profile: profile.item })}
        />
    )
}}
keyExtractor={(item, index) => index}
ListEmptyComponent={() => <GameCardEmpty />}
ItemSeparatorComponent={() => <View style={{marginBottom: 5}}></View>}
/>

【讨论】：