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) 语句，它正确显示了道具，因此正确的数据从 FlatList 传递到 TextComp，但 TextComp 是只是没有得到渲染。

Answer 1

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

React Native FlatList 项目不呈现

React Native FlatList items not rendering

reactjs

react-native

react-native-android

react-native-ios

react-native-flatlist