ListItem不显示React Native中"title“属性中的文本
ListItem不显示React Native中"title“属性中的文本
提问于 2018-01-29 03:19:58
我在FlatList中使用来自react原生元素的ListItem，代码是
render() {
return (
<View style={commonStyles.container}>
<List>
<FlatList
data={this.props.questions}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={'nicola'}
/>
)}
/>
</List>
</View>
);
}问题是文本( 'nicola‘)没有被渲染
回答 3
Stack Overflow用户
发布于 2018-08-08 11:55:40
我知道这已经很晚了，但我也遇到过同样的问题。
const list = [
{
name: 'Account',
icon: 'av-timer'
},
{
name: 'Category',
icon: 'flight-takeoff'
},
{
name: 'About',
icon: 'av-timer'
}]
... // some code here
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{
list.map((item, i) => (
<ListItem
key={i}
title={item.name}
leftIcon={{ name: item.icon }}
/>
))
}
</View>当我使用上面的代码时，只显示图标，但当我删除alignItems prop时，这个问题就解决了。
Stack Overflow用户
发布于 2018-01-29 03:30:43
不要在列表中使用FlatList，使用ListItem，并提供它的密钥
render() {
return (
<View style={commonStyles.container}>
<List>
{
this.props.questions.map((l, i) => (
<ListItem
roundAvatar
key={i} // <-- new property
title={'nicola'}
/>
))
}
</List>
</View>
);
}Stack Overflow用户
发布于 2018-01-29 03:31:45
可能是因为您要将FlatList RN组件作为子组件添加到每个列表中。你实际上是在做一个列表列表。
试试这个：
render() {
return (
<View style={commonStyles.container}>
<List>
{
this.props.questions.map((item, i) => (
<ListItem
roundAvatar
title={'nicola'}
/>
))
}
</List>
</View>
);
}编辑:在看到关于键的答案后，我不确定这是否就是问题所在。RN使用它来确定是否每行都是不同的，但如果是这样的话，您应该只看到一行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48490367
复制相关文章
相似问题
腾讯云开发者
