React Native FlatList 项目未呈现

Question

我正在测试嵌套在导航器中的 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 没有被呈现。

Answer 1

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