[英]Unable to loop and render FlatList inside .map function react-native
我正在尝试在组件内呈现 FlatList。 组件本身位于 ScrollView 内。
我正在使用 map 函数遍历数据以传递到组件中。 早些时候我使用的是 ScrollView 而不是 FlatList。 它工作正常,但渲染速度很慢。 所以我决定使用 FlatList。
这是我的代码:
renderComp(){
const { filtersView,cats,cats_title, clearStyle} = styles;
const data = this.props.ingreds;
const arr = Object.entries(data);
return arr.map(i=> {
const name= i[0];
const items_obj = i[1];
const items = Object.values(items_obj);
return(
<View key={name} style= {filtersView}>
<View style={cats}>
<Text style ={cats_title}>{name}</Text>
<Text style={clearStyle}>Clear All</Text>
</View>
<View style={{justifyContent:'flex-start', alignItems:'flex-start'}}>
<FlatList
style={{ marginRight:6}}
data={items}
keyExtractor={(x,i)=> i.toString()}
renderItem={({item}) =>{
this.renderItems(item)
}}
/>
</View>
</View>
)
})
}
这是 ScrollView 组件:
<ScrollView contentContainerStyle={{alignItems:'flex-start',
justifyContent:'flex-start',flex:1, height:72}} >
{this.renderComp()}
</ScrollView>
并且循环在一次迭代后停止。
这是输出: https : //i.stack.imgur.com/yM151.png
有什么建议?
ReactNative FlatList renderItem 方法应该返回一个 ?React.Element 组件。 在您的情况下,请使用 return this.renderItems 或跳过内括号。
https://facebook.github.io/react-native/docs/flatlist#renderitem
({item}) => this.renderItems(item)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.