FlatList 没有向我显示任何结果,为什么?
我正在学习 React Native,我正在尝试在平面列表中显示数据,但它不起作用我不知道为什么这是我的代码:
<FlatList
numColumns={3}
data={posts}
horizontal={false}
renderItem={(item) =>
<Image
style={{width:100, height:100, backgroundColor:"black"}}
onLoadStart={() => {
console.log("Loading");
}}
resizeMode='contain'
source={{uri: item.imageUri}} />
}
/>
以及我的数据的代码:
const docRef = doc(db, "posts", auth.currentUser.uid);
const colRef = collection(docRef, "userPosts");
const q = query(colRef, orderBy("createAt", "asc"));
getDocs(q).then((docsSnap) => {
let posts;
docsSnap.forEach(doc => {
// doc.data() is never undefined for query doc snapshots
const data = doc.data();
const id = doc.id;
posts = {id, ...data};
});
..............the rest of code
为什么它不起作用?
I'm learning react native and i'm trying to show data in flatlist, but it didn't works i don't know why this is my code :
<FlatList
numColumns={3}
data={posts}
horizontal={false}
renderItem={(item) =>
<Image
style={{width:100, height:100, backgroundColor:"black"}}
onLoadStart={() => {
console.log("Loading");
}}
resizeMode='contain'
source={{uri: item.imageUri}} />
}
/>
and the code of my data :
const docRef = doc(db, "posts", auth.currentUser.uid);
const colRef = collection(docRef, "userPosts");
const q = query(colRef, orderBy("createAt", "asc"));
getDocs(q).then((docsSnap) => {
let posts;
docsSnap.forEach(doc => {
// doc.data() is never undefined for query doc snapshots
const data = doc.data();
const id = doc.id;
posts = {id, ...data};
});
..............the rest of code
Why it didn't works please ?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我不太确定您是否有此错误
当我尝试将平面列表嵌套在 ScrollView 中时,
VirtualizedList 永远不应该嵌套在具有相同方向的普通 ScrollView 中,因为它可能会破坏窗口和其他功能 - 请改用另一个 VirtualizedList 支持的容器。
所以我觉得flatlist和scrollView有冲突,尽量让它水平!
将
horizontal={false}
替换为horizontal
不过它对我有用!
I am not really sure if you have this error or not
I had this when I am trying to nest flatlist inside a ScrollView,
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
So I think there is a conflict between flatlist and scrollView, try to make it horizontal!
replace
horizontal={false}
withhorizontal
It worked for me though!
为了触发视图的重新渲染,您必须将帖子放入状态中。请参阅: https://reactnative.dev/docs/state
如果您使用的是功能组件,您只需像这样使用
useState()
钩子:In order to trigger a rerender of your view, you must put the posts in the state. See: https://reactnative.dev/docs/state
If you are using functional components you can simply use the
useState()
hook like this: