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，而FlatList本身具有变化的尺寸。因此，解决我的问题的方法是向项目组件添加宽度和高度样式属性。为了使其自动调整大小，我使用了内置的React Native Dimensions。

反应未显示的本机FlatList项目

1 个答案: