Javascript 如何将ScrollView与嵌套平面列表一起使用？

在主屏幕中，我有3个平面列表和一些其他视图的“其他数据”， 所以我应该把它包装在ScrollView中，这样我可以滚动查看其他数据等等

但是当我用scrollView包装平面列表时，我得到了这个警告

VirtualizedList不应嵌套在带有 相同的方向-使用另一个VirtualizedList支持的容器 相反

那么，我如何在不将页眉/页脚组件添加到平面列表的情况下解决这个问题呢

“注意：我在世博会上没有收到警告，我也没有使用它，这只是观看现场演示的一个例子”

这里是代码片段

const HomeScreen = () => {
  const renderServices = ({item, index}) => {
    return (
      <View style={styles.itemContainer}>
        <View style={styles.serviceImgContainer}>
          <Image
            style={styles.serviceImg}
            source={{
              uri:
                'https://cdn1.iconfinder.com/data/icons/appliance-1/100/dryer-03-512.png',
            }}
          />
        </View>
        <Text>{item.name}</Text>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <ScrollView style={{flex: 1}}>
        <View style={styles.headerContainer}>
          <Text style={styles.headerText}>
             Booking Now!
          </Text>
          <View style={styles.imgHeaderContainer} />
        </View>
        {/* Services */}
        <View style={styles.servicesContainer}>
          <View style={styles.servicesHeader}>
            <Text style={styles.headerTitle}>Services</Text>
            <TouchableOpacity>
              <Text style={styles.headerTitle}>more</Text>
            </TouchableOpacity>
          </View>
          <FlatList
            scrollEnabled={false}
            data={[
              {id: 0, name: 'service 0', img: 'img.jpg'},
              {id: 1, name: 'service 1', img: 'img.jpg'},
              {id: 2, name: 'service 2', img: 'img.jpg'},
              {id: 3, name: 'service 3', img: 'img.jpg'},
              {id: 4, name: 'service 4', img: 'img.jpg'},
              {id: 5, name: 'service 5', img: 'img.jpg'},
              {id: 6, name: 'service 6', img: 'img.jpg'},
              {id: 7, name: 'service 7', img: 'img.jpg'},
            ]}
            renderItem={renderServices}
            keyExtractor={(item) => item.id.toString()}
            numColumns={4}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            columnWrapperStyle={styles.columnWrapperStyle}
          />
        </View>

        {/* FlatList Services 2 */}
        <View style={styles.servicesContainer}>
          <View style={styles.servicesHeader}>
            <Text style={styles.headerTitle}>Services</Text>
            <TouchableOpacity>
              <Text style={styles.headerTitle}>more</Text>
            </TouchableOpacity>
          </View>
          <FlatList
            scrollEnabled={false}
            data={[
              {id: 0, name: 'service 0', img: 'img.jpg'},
              {id: 1, name: 'service 1', img: 'img.jpg'},
              {id: 2, name: 'service 2', img: 'img.jpg'},
              {id: 3, name: 'service 3', img: 'img.jpg'},
              {id: 4, name: 'service 4', img: 'img.jpg'},
              {id: 5, name: 'service 5', img: 'img.jpg'},
              {id: 6, name: 'service 6', img: 'img.jpg'},
              {id: 7, name: 'service 7', img: 'img.jpg'},
            ]}
            renderItem={renderServices}
            keyExtractor={(item) => item.id.toString()}
            numColumns={4}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            columnWrapperStyle={styles.columnWrapperStyle}
          />
        </View>

        {/* FlatList Services 3 .... */} 
            ....
        
        {/* other data */} 
            ....
      </ScrollView>
    </View>
  );
};

const主屏幕=（）=>{
const renderServices=（{item，index}）=>{
返回(
{item.name}
);
};
返回(
现在预订！
{/*服务*/}
服务
更多
item.id.toString（）}
numColumns={4}
ItemSeparatorComponent={（）=>}
columnWrapperStyle={styles.columnWrapperStyle}
/>
{/*平面列表服务2*/}
服务
更多
item.id.toString（）}
numColumns={4}
ItemSeparatorComponent={（）=>}
columnWrapperStyle={styles.columnWrapperStyle}
/>
{/*平面列表服务3….*/}
....
{/*其他数据*/}
....
);
};

是否尝试在scrollView中使用scrollView而不是flatList？

---

当您在scrollView内部使用scrollView时，它似乎会自动为嵌套滚动启用，您也可以添加

nestedScrollEnabled

。

为什么需要scrollView和flatlist是因为您希望在flatlist之前或之后渲染某些内容，但是flatlist有一个内置的功能，它做同样的事情，但你没有最大化它，这就是为什么你会得到警告。 它们称为列表页眉组件（在列表之前呈现元素而不重复）和列表页脚组件（在列表之后呈现元素而不重复）

举个例子：

if (index === 0) {
            return (
                <View>
                <Text>The Team</Text>
                <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideChevron={true}
                leftAvatar={{source: {uri: baseUrl + item.image}}} 
                />
                </View>
            )
        }
        return (
                <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideChevron={true}
                leftAvatar={{source: {uri: baseUrl + item.image}}} 
                />
        )
    }

    if (this.props.leaders.isLoading) {
        return (
            <ScrollView>
                <History />
                    <Card title="Corporate Leadership">
                        <Loading />
                    </Card>
            </ScrollView>
        );
    }
    else if (this.props.leaders.errMess) {
        return (
            <ScrollView>
                <Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
                    <History />
                    <Card title="Corporate Leadership">
                        <Text>{this.props.leaders.errMess}</Text>
                    </Card>
                </Animatable.View>
            </ScrollView>
        )

    }
    else {
        return (
                <Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
                        <FlatList
                            ListHeaderComponent={
                                <History />
                            }
                            data={this.props.leaders.leaders}
                            renderItem={renderLeaders}
                            keyExtractor={item => item.id.toString()}
                            // ListFooterComponent={
                            //     <>

                            //     </>
                            // } 
                            />
                </Animatable.View>
        )
    }

}

if（索引===0）{
返回(
团队
)
}
返回(
)
}
if（this.props.leaders.isload）{
返回(
);
}
else if（this.props.leaders.errmes）{
返回(
{this.props.leaders.errMess}
)
}
否则{
返回(
item.id.toString（）}
//ListFooter组件={
//     
//     
// } 
/>
)
}
}

---

}

老实说，我不太理解你，你能解释一下吗？当你有嵌套滚动视图时，你可以启用嵌套滚动选项。请在此处尝试代码：但iOS默认支持嵌套滚动！所以

nestedScrollEnabled

不会做一些特殊的事情来解决这个问题！请看下面的代码：。此外，我说它是自动启用的，但请确保您可以添加它。。不要在scrollview中使用flatlist使用另一个scrollview是的，但是在我的例子中使用map（）不是一个好主意遗憾的是，我对flatlist的一些属性感兴趣，无论如何谢谢你的帮助