react-native - 将带有条件的 ScrollView 转换为 Flatlist
问题描述
我需要将此滚动视图转换为平面列表,但由于我自己没有编写代码而完全卡住了。
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>
解决方案
我建议你在其他地方对你的数组进行排序(比如在 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>}
/>
推荐阅读
- android - 为什么我的 Flutter 应用在 Android 上请求 Run on Startup 权限?
- windows - 如何将压缩文件放入 Java 程序?
- c# - ViewModel 将 null 返回到表单中,我该如何解决这个问题
- c# - 实体框架,相似但不同的数据库——我们可以在实体类之间使用继承吗?
- python - 在最小化问题中保存中间结果
- image - 在 .rst 文件中插入内联图标
- flutter - 行 mainAxisAlignment 不适用于 FittedBox
- node.js - 基于 URL 参数动态访问 Mongodb 数据库集合
- javascript - 无法根据选定的数据列表选项自动填充文本区域
- javascript - 有没有办法我可以维护从数据库中填充并出现在 asp.net 中母版页的页面加载功能上的选定菜单/子菜单