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）语句，并且它正确地显示了props，因此正确的数据已从FlatList传递到TextComp，但TextComp未被渲染。

- Nerdragen

---

你能分享一下 TextComp 的代码吗？ - Jose Vf

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

看起来对我来说运行良好：https://snack.expo.io/@marcelkalveram/flatlist-with-custom-view-component。你能发布一个完整的代码示例或者一个 Snack 来帮助我们重现这个问题吗？ - Marcel Kalveram

你在 TextComp 组件中添加了一个返回语句吗？例如：const TextComp = () => { return(<Text>...</Text>) } - Ray

@Nerdragen 当我要求 TextComp 的代码时，我是在要求完整的代码，这种情况下组件内部的所有内容（如何处理 props 和返回组件的方式）非常重要，仅显示 <View><Text>{props.text}</Text></View> 没有任何用处，所以如果可能的话，请分享组件的完整代码，以便更好地了解可能出现的问题。 - Jose Vf

Answer 1

Marcel Kalveram在与我的代码进行比较后找到了解决方案。结果发现，在FlatList中正确渲染项目需要指定项目的高度和宽度。我想，这是因为项目的尺寸需要用来正确调整FlatList中的项目大小。同样地，项目的尺寸不能使用百分比，因为其父级是FlatList，而FlatList本身具有不同的尺寸。因此，解决我的问题的方法是为项目组件添加宽度和高度样式属性。为了使其自动调整大小，我使用了内置的React Native Dimensions。

- Nerdragen