[英]how to have flat list render only once?
I am trying to print the ComponentTwo Flatlist only once but instead, I am getting the result image1 but instead, I need it to appear like this image 2 .我试图只打印 ComponentTwo Flatlist 一次,但相反,我得到了结果image1但相反,我需要它看起来像这个image 2 。 I have attached a snack link with the code in it.
我附上了一个带有代码的小吃链接。
Code That will produce the same results as in the images Expo Snack Link将产生与图像Expo Snack Link 中相同结果的代码
Working Example: Expo Snack工作示例:世博小吃
Here is how you can fix this, first pass the index
value to ComponentOne
from App.js
以下是解决此问题的方法,首先将
index
值从App.js
传递给ComponentOne
const App = () => {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({item, index}) => <ComponentOne name={item.title} index={index}/>}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
);
};
Now use that prop value to render ComponentTwo
conditionally in ComponentOne
like shown below:现在,使用该道具价值呈现
ComponentTwo
有条件ComponentOne
像图所示:
//...const
ComponentOne = (props: ComponentOneProps) => {
return (
<View style={{ margin: 15, backgroundColor: 'yellow' }}>
<FlatList
data={recent}
renderItem={({ item }) => {
console.log("hello")
// @ts-ignore
return props.index == 0?<ComponentTwo name={item.name} />:null;
}}
keyExtractor={(item) => item.idd}
/>
//...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.