如何在 React Native 中使用可滾動的 FlatList 制作屏幕？

Question

我的一個屏幕有一個 FlatList，但它也有一個必須保留在頁面頂部的 TextInput。 TextInput 確定呈現哪個其他組件，如果它是空的，它是一個類別頁面，但如果它填充了任何文本，它是搜索結果。 我現在的問題是我在主 FlatList 之外有 TextInput，這導致它即使在滾動列表時也位於屏幕頂部。 我希望它保持在頁面頂部而不是跟隨滾動。

如果我將 TextInput 放在其中一個 FlatLists 中，它會導致另一個由於呈現單獨的組件而沒有它。 但是，如果我將它放在兩個 FlatLists 中，它會創建一個錯誤，在輸入第一個字符后，TextInput 將退出編輯模式，因為正在呈現一個全新的組件。

這是我現在的結構：

<View>
    <TextInput />
<View>
{conditional check ? (
    <FlatList /> :
    (<View>
        <FlatList />
    </View>
}

Answer 1

那么文檔如何說FlatList有一個名為ListHeaderComponent的道具，可以在列表頂部顯示一個組件。 https://reactnative.dev/docs/flatlist

//textinput component

const input = () => {
  <View>
    <TextInput />
  </View>
};

<FlatList
  listHeaderComponent={input}
  data={/* data or another type of array */}
  renderItem={ /* put here what you want to be scrollable */ }
/>

Answer 2

如果我理解正確，如果您想使用列表滾動TextInput ，您應該將TextInput和所有內容包裝在ScrollView中，而不是使用FlatList ，映射要呈現的數據並將其傳遞給如下所示的子組件。

<ScrollView>
    <TextInput />
{conditional check ? (
    {data1.map((item,index)=> <ChildComponent1/> //renderItem in FlatList 1
     )}):
    (<View>
        {data2.map((item,index)=> <ChildComponent2/> //renderItem in FlatList 2
     )}
    </View>)
}
<ScrollView>