reactjs - React Native FlatList 项目不呈现

Question

我正在测试嵌套在 Navigator 中的 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) 语句，它正确显示了 Prop ，因此正确的数据从 FlatList 传递到 TextComp，但 TextComp 只是没有被渲染。

Answer 1

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