如何让平面列表只渲染一次？

Question

我试图只打印 ComponentTwo Flatlist 一次，但我得到了结果 image1 but instead, I need it to appear like this image 2。我附上了零食link，里面有代码。

将产生与图像中相同结果的代码 Expo Snack Link

Answer 1

工作示例：Expo Snack

解决此问题的方法如下，首先将 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>
  );
};

现在使用该属性值在 ComponentOne 中有条件地呈现 ComponentTwo，如下所示：

//...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}
      />
//...

如何让平面列表只渲染一次？

how to have flat list render only once?

javascript

typescript

react-native

react-native-flatlist

flatlist