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。