不呈现FlatList
不呈现FlatList
提问于 2018-06-25 08:07:32
我试图将滚动视图中的常规映射数组转换为FlatList组件，但没有太多的运气。使用地图效果很好，但现在将相同的数据转换为FlatList并不会呈现任何内容。
FLATLIST：
<View style={styles.container}>
<FlatList
keyExtractor={(item) => item.url}
data={this.props.links}
renderItem={
({item}) => {
<TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${link.mobile.replace('https://', '')}`)}>
<LinkContainer
id={item.id}
likes={item.totalLikes}
username={this.props.username}/>
</TouchableOpacity>
}
}
/>
</View> 映射数组：
<View style={styles.container}>
this.props.links((link) => {
return(
<TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${link.mobile.replace('https://', '')}`)}>
<LinkContainer
id={link.id}
likes={link.totalLikes}
username={this.props.username}/>
</TouchableOpacity>
)
})因此，使用map方法工作得很好但又试图将其转换为平面列表的示例失败了，没有任何日志或错误，只有空白页。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-25 08:47:18
根据您提供的信息，您似乎缺少了在renderItem函数中传播参数。我们使用了{}，因此需要返回JSX标记。
<View style={styles.container}>
<FlatList
keyExtractor={(link) => link.url}
data={this.props.links}
renderItem={
({item}) => { // Here you receive array element as item.
return <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${item.mobile.replace('https://', '')}`)}>
<LinkContainer
id={item.id}
likes={item.totalLikes}
username={this.props.username}/>
</TouchableOpacity>
}
}
/>
</View> 看看文档你在renderItem中收到了什么
Stack Overflow用户
发布于 2018-06-25 09:20:15
我相信这个问题可能很简单。您的<Flatlist>位于<View style={styles.container}>内部，它没有自己的高度和宽度，因此在其中呈现的项也没有高度和宽度，因此不会出现在屏幕上。(如果使用flex在LinkContainer组件中设置高度)。给Flatlist一个高度和一个宽度，然后再试一次。
此外，根据Revansiddh的回答，您的renderItem道具应该如下所示。
注意删除了fat箭头函数中的{}。如果像在问题中一样将JSX包装在{}中，胖箭头函数将不会返回任何内容或返回undefined，因此不会在屏幕上呈现任何内容。因此，您需要一个返回语句，或者完全删除{}。
({ item }) => (
<TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${item.mobile.replace('https://', '')}`)}>
<LinkContainer
id={item.id}
likes={item.totalLikes}
username={this.props.username}
/>
</TouchableOpacity>
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51018810
复制相关文章
相似问题
腾讯云开发者
