我正在通过构建一个交付应用程序来学习React native，我想使用sectionlist或任何最好的组件在我的主屏幕上显示项目。我有两个部分：一个叫做Hot Deals，第二个叫做“新添加的食物”。我希望第二个项目只在用户向下滚动到屏幕时显示，而第一个部分向上移动。这正是sectionList所做的。我现在面临的挑战是这两个部分有不同的样式。所以，我如何在react native中实现这一点？2我希望两个部分有不同的样式。3基本上，第一个列表将以水平形式显示，而最后一个列表将以垂直形式显示。4下面是我的数据：`

const sectionData =[
     

    {
    title: 'Hot Deals',
    data:[[
        {
            id: 1,
            food: 'ChickenLap',
            description: 'Simply dummy text of the printing and typesetting industry. Lorem Ipsum has   been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged',
            image: "https://res.cloudinary.com/blognodeapi/image/upload/v1670174078/chickeneat/pexels-  %E7%B4%A0%E6%9D%90%E7%8E%8B%E5%9B%BD-footage-kingdom-13823476_ki08p4.jpg",
            price: 1200
        },

   ]

 const recent =[

{
    id: 6,
    food: 'Smart Noodles3',
    description: 'Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged',
    image: 'https://res.cloudinary.com/blognodeapi/image/upload/v1670175383/chickeneat/pexels-lukas-1309593_pydyhi.jpg',
    price: 2700
    },

  ]

以下是我目前为止展示它们的方式：`

<SectionList style={{width: '100%'}}

   sections={sectionData}

 renderSectionHeader={({section: {title}})=> (
         <>
            <Text style={homePageStyles.homePageSubViewText2}>
                 
               {title}
             </Text>

        </>       

        )}

    renderItem={({item, index, section})=>  (
              <>     
          <FlatList
            data={item}
             renderItem={({item})=>(
               <HomePageCard data={item}
                 
                  />
                  
                )}
                keyExtractor={(item) => item.id}
              />         

        <Text style={[homePageStyles.homePageSubViewText2, ]}>
                  Newly Added Meals
                </Text>
                  <FlatList
                  
                    data={recent}
                    renderItem={({item})=>(
                      <RecentPostCard data={item}
                      
                      />
                    )}
                    keyExtractor={(item) => item.id}
                  />
          
              </>

          )}
            
            keyExtractor={(item, index) => item + index}
            
          />
      />

它完全按照我希望的方式工作。我可以使用flatList对部分进行不同的样式设置。但是，它在屏幕上显示了以下错误：A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.
虽然它正在工作并显示在屏幕上，但这个错误显示为警报。我该如何最好地处理这个问题？
我展示了我的代码，我尝试通过在sectionList中使用flatList来实现这些代码