React Native FlatList 项目未呈现答案

【问题标题】：React Native FlatList items not renderingReact Native FlatList 项目未呈现
【发布时间】：2019-03-17 21:13:33
【问题描述】：

我正在测试一个嵌套在 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 只是没有被渲染。

【问题讨论】：

你能分享TextComp的代码吗？
{this.props.data.key}
对我来说似乎工作正常：snack.expo.io/@marcelkalveram/…。您能否发布一个完整的代码示例或帮助我们重现问题的 Snack？
您是否在TextComp 组件中添加了return 语句？例如：const TextComp = () => { return(<Text>...</Text>) }
@Nerdragen 当我要求提供TextComp 的代码时，我要求提供完整代码，在这种情况下，组件内的所有内容都非常重要（如何处理道具以及如何返回组件），仅显示 <View><Text>{props.text}</Text></View> 根本没有用处，因此，只有在可以的情况下，请分享组件的完整代码，以便更好地了解那里可能出现的问题。

标签： reactjs react-native react-native-android react-native-ios react-native-flatlist

【解决方案1】：

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

【讨论】：