我正在测试嵌套在导航器中的 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楼 票数:5 已采纳

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

  ask by Nerdragen translate from so

未解决问题?本站智能推荐:

1回复

如何在FlatList中记录其他事件?

我正在使用FlatList渲染项目。 每个项目都是一个单独的卡片样式组件。 每个项目都有onPress事件处理程序,该事件处理程序更改了组件。 这是我的平面清单。 这是CardItem组件 现在,我想要的是一次只更改一个卡组件。 因此,当用户触摸第一卡组件时,它应
2回复

当我单击 react-native 中的 flatlist 项目时,如何在文本组件上设置值?

当我在 react-native 中单击 flatlist 的一个项目时,如何在文本组件上设置一个值? 我想在文本组件上显示 flatlist 的值。 当我点击一个平面列表的项目时。 所以请帮助我如何实现这个功能。
1回复

如果在 react-native 中有最大的数据,Flatlist 会在滚动屏幕时显示为空白

我正在使用 react-native-flatlist 滚动来自服务器的最大数据并获取并显示在我的屏幕上。 但在这里我面临两个问题。 滚动不流畅 在滚动最大数据时,它显示空白。 这是我的示例代码。
4回复

如何在Flatlist中支持ios和android的react-native中实现复选框

官网上的CheckBox只支持Android。 我们如何在 iOS 和 Android 都支持的 react-native 中实现复选框?
1回复

React-Native Scrollview和FlatList的滚动相互冲突

我遇到了一个问题,问题是我正在使用scrollview和“平面列表”,基本上我有一个视图,在该视图中,我们可以看到顶部的静态视图和屏幕中心的一些选项卡,并且我使用平面列表进行渲染选项卡数据很大,但我想在滚动“平面列表”时滚动顶部静态配置文件视图,因此在滚动“平面列表”时上部配置文件也将滚动,因
1回复

在React Native的FlatList中延迟加载项目?

我已经集成了FlatList,我想延迟1000毫升来加载每个项目。 第一次加载索引0,在1000毫升加载后索引1 ... FlatList项目可能会延迟。 请帮我。 谢谢。
1回复

在React Native中按下按钮时如何更改FlatList项目背景颜色

假设我有一个包含一些项目的FlatList,我按入其中一个,然后打开另一个包含该项目详细信息的屏幕。 好吧,所以我需要的是,在按下“知道了!”按钮之后 并进入后屏幕(FlatList屏幕),如何在所选行中将背景色设置为绿色? 所以我单击了FlatList的一个项目,然后显示了另一个屏幕
2回复

当 FlatList 项目进入 View 时触发函数

我有一个基本的平面列表如下。 我正在尝试根据前四个项目是否在视图中来隐藏/显示另一个组件。 为了做到这一点,我必须首先弄清楚某个元素是否在视野中。 我该如何解决这个问题?