繁体   English   中英

React Native FlatList 项目未呈现

React Native FlatList items not rendering

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在测试嵌套在导航器中的 FlatList 并试图了解它是如何工作的。 下面的代码工作正常:

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
    horizontal={true}
/>

但这不会:

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <TextComp data={item}/>}
    horizontal={true}
/>

TextComp 只是一个显示 item.key 的组件,并且在单独测试时按预期工作。 代码是

<View> 
    <Text>{this.props.data.key}</Text> 
</View> 

我还尝试在两个组件周围绘制边框,似乎 FlatList 肯定正在呈现,但项目不是。

我正在我的 Android 设备上进行测试。

更新:我向 TextComp 组件添加了 console.log(this.props) 语句,它正确显示了道具,因此正确的数据正在从 FlatList 传递到 TextComp,但 TextComp 没有被呈现。

1 个回复

在我将他的代码与我的代码进行比较后,Marcel Kalveram 在这里得到了解决方案。 事实证明,项目需要高度和宽度才能在 FlatList 中正确呈现。 我对此的解释是,需要项目的尺寸才能在 FlatList 中正确调整项目的大小。 同样,项目的尺寸不能是百分比,因为它的父项是一个 FlatList,它本身具有不同的尺寸。 因此,我的问题的解决方案是在 item 组件中添加 width 和 height 样式属性。 为了让它自动调整大小,我使用了内置的 React Native Dimensions。

2 React-native:如何包装 FlatList 项目

我有一个查询返回的术语列表。 每一个都是一个词。 目前我的 FlatList 将每个单词渲染到同一行上的一个按钮中 (horizo​​ntal={true}) 我希望按钮像普通文本一样换行。 但我绝对不想使用列功能,因为那样看起来不太自然。 这对于 FlatList 来说可能是一个糟糕的用例吗? 我 ...

6 如何在React-Native中刷新FlatList中的单个项目?

我使用React和Flask API创建了一个Like函数,它运行得很好,它使Like操作,但它只在我刷新整个列表时出现。 不知怎的,我想在帖子上刷新Like图片和Like计数。 我试图将extraData放在我的FlatList中,但这并没有解决我的问题...... ...

9 React-Native:FlatList 重新渲染每个项目

所以我有一个 FlatList,它被提供了一个项目数组。 当我滚动到底部时,我将更多项目附加到该数组的末尾并显示给用户。 问题是当我们添加到我们的项目数组时,每个项目都会被渲染,有时甚至被渲染两次。 这里简化了代码。 /r/reactnative 无法回答这个问题。 这是输出。 每次设置我 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM