blocks|key|826235|text|不要在列表中使用FlatList，使用ListItem，并提供它的密钥|type|unstyled|depth|inlineStyleRanges|entityRanges|data|826236|++render()+{
++++return+(
++++++<View+style={commonStyles.container}>
++++++++<List>
++++++++++{
+++++++++++++this.props.questions.map((l,+i)+=>+(
+++++++++++++++<ListItem
+++++++++++++++++roundAvatar
+++++++++++++++++key={i}+//+<--+new+property
+++++++++++++++++title={'nicola'}
+++++++++++++++/>
+++++++++++++))
+++++++++++}
+++++++++</List>
++++++</View>
++++);
++}|code-block|syntax|javascript|826237|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Don't use FlatList inside List, use ListItem, and provide key to it

<pre><code> render() {
 return (
 &lt;View style={commonStyles.container}&gt;
 &lt;List&gt;
 {
 this.props.questions.map((l, i) =&gt; (
 &lt;ListItem
 roundAvatar
 key={i} // &lt;-- new property
 title={'nicola'}
 /&gt;
 ))
 }
 &lt;/List&gt;
 &lt;/View&gt;
 );
 }
</code></pre>

blocks|key|920940|text|可能是因为您要将FlatList+RN组件作为子组件添加到每个列表中。你实际上是在做一个列表列表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|920941|试试这个：|920942|++++render()+{
++++++++return+(
++++++++++<View+style={commonStyles.container}>
++++++++++++<List>
{
++++this.props.questions.map((item,+i)+=>+(
++++++<ListItem
+++++++++++++roundAvatar
++++++++++++title={'nicola'}
+++++++++++/>
++++))
++}

++++++++++++</List>
++++++++++</View>
++++++++);
++++++}|code-block|syntax|javascript|920943|编辑:在看到关于键的答案后，我不确定这是否就是问题所在。RN使用它来确定是否每行都是不同的，但如果是这样的话，您应该只看到一行。|920944|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Probably because you are adding a FlatList RN component as a child in every list. You are actually making a list of lists. 

Try this:

<pre><code> render() {
 return (
 &lt;View style={commonStyles.container}&gt;
 &lt;List&gt;
{
 this.props.questions.map((item, i) =&gt; (
 &lt;ListItem
 roundAvatar
 title={'nicola'}
 /&gt;
 ))
 }

 &lt;/List&gt;
 &lt;/View&gt;
 );
 }
</code></pre>

Edit: After seeing the answer about the keys, I am not sure if that would be the problem. RN uses it to determine if every row is different, but you should be seeing only one row if that were the case.

blocks|key|457258|text|我知道这已经很晚了，但我也遇到过同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|457259|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>|code-block|syntax|javascript|457260|当我使用上面的代码时，只显示图标，但当我删除alignItems+prop时，这个问题就解决了。|457261|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I know this is quite late, but I had encountered the same issue.

<pre><code>const list = [
{
 name: 'Account',
 icon: 'av-timer'
},
{
 name: 'Category',
 icon: 'flight-takeoff'
},
{
 name: 'About',
 icon: 'av-timer'
}]

... // some code here

 &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
 {
 list.map((item, i) =&gt; (
 &lt;ListItem
 key={i}
 title={item.name}
 leftIcon={{ name: item.icon }}
 /&gt;
 ))
 }
 &lt;/View&gt;
</code></pre>

When I used the above code, only icons were shown, but the issue was resolved when I removed alignItems prop.

I'm using <a href="https://react-native-training.github.io/react-native-elements/API/lists/" rel="nofollow noreferrer">ListItem</a> from react native elements in a FlatList, the code is

<pre><code> render() {
 return (
 &lt;View style={commonStyles.container}&gt;
 &lt;List&gt;
 &lt;FlatList
 data={this.props.questions}
 renderItem={({ item }) =&gt; (
 &lt;ListItem
 roundAvatar
 title={'nicola'}
 /&gt;
 )}
 /&gt;
 &lt;/List&gt;
 &lt;/View&gt;
 );
 }
</code></pre>

The issue is that text ( 'nicola' ) is not rendered

<a href="https://i.stack.imgur.com/9XNrh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9XNrh.png" alt="enter image description here"></a>

ListItem is not showing text from the "title" property in React Native

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在FlatList中使用来自react原生元素的，代码是 render() { return ( <View style={commonStyles.container}> <List> <FlatList data={this.props.qu...

问ListItem不显示React Native中"title“属性中的文本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ListItem不显示React Native中"title“属性中的文本EN