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

Question

我試圖只打印 ComponentTwo Flatlist 一次，但相反，我得到了結果image1但相反，我需要它看起來像這個image 2 。 我附上了一個帶有代碼的小吃鏈接。

將產生與圖像Expo Snack Link 中相同結果的代碼

Answer 1

工作示例：世博小吃

以下是解決此問題的方法，首先將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>
  );
};

現在，使用該道具價值呈現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}
      />
//...