如何在主屏幕上呈现两个数据数组，如 Instagram 故事和 Post？

Question

我正在尝试使用 React Native 制作一个社交应用程序，我正在主屏幕上工作，我想在顶部（水平滚动）和 post 下面（垂直滚动）显示用户故事，类似于 instagram，我对两者都使用了不同的数组，我尝试对两个数组都使用平面列表，一个用于故事，一个用于 post，但我想向上滚动故事平面列表，当滚动 post 平面时，我试图将它们放在滚动视图中，所以故事和 post 向上滚动它以某种方式工作，但给我警告，虚拟化列表无法在滚动视图内呈现，然后我尝试使用部分列表，但问题是部分列表使用相同的数据数组，但我希望你使用两个数据数组，如何解决这个问题？所以我可以让主屏幕像 instargam

Answer 1

创建一个名为 RenderStories

的函数

里面RenderStories

const RenderStories = () => (
  <>
     // Write your Story Flatlist Render Code...
  </>
)

在你的 Posts flatlist 中这样写

<FlatList
    data={Posts} //This will be your Post array
    ListHeaderComponent={RenderStories()} // Render Stories is being called here...
    renderItem={({ item }) => (
      <>
         // Write your Post Render Code...
      </>
    )}
/>

这将确保您的帖子和故事一起向上滚动。

如何在主屏幕上呈现两个数据数组，如 Instagram 故事和 Post？

How render Two arrays of Data like Instagaram stories and Post on HomeScreen?

javascript

arrays

react-native

react-native-sectionlist