React Native FlatList 项目未呈现

Question

I'm testing a FlatList nested in a Navigator and trying to learn how it works. The code below works fine:

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
    horizontal={true}
/>

But this does not:

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <TextComp data={item}/>}
    horizontal={true}
/>

TextComp is just a component that displays item.key and it works as intended when tested separately. The code is

<View> 
    <Text>{this.props.data.key}</Text> 
</View> 

I've also tried drawing borders around both components and it seems that the FlatList is definitely rendering, but the items are not.

I am testing on my Android device.

Update: I added console.log(this.props) statement to the TextComp component and it displays the props correctly, so the the correct data is being passed from the FlatList to TextComp, but TextComp is just not getting rendered.

Answer 1

Marcel Kalveram got the solution here after I compared his code with mine. Turns out, a height and width are required for the item to render correctly in the FlatList. The explanation I figured for this is that the item's dimensions are required to properly size the item within the FlatList. Similarly, an item's dimensions cannot be percentages since its parent is a FlatList, which has varying dimensions itself. Therefore, the solution to my problem was to add width and height style attributes to the item component. To make it automatically resize, I used built-in React Native Dimensions.