VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中 - 改用另一个 VirtualizedList 支持的容器 - Javascript

在开发react-native应用时，我们经常会需要使用到滚动列表。而滚动列表的实现方式，一般是使用 VirtualizedList 或 ScrollView。

当我们需要在同一个滚动视图中嵌套多个 VirtualizedList 时，可能会遇到以下问题：

• VirtualizedList 渲染出的列表无法滑动
• 在某些 Android 设备上，页面卡死

这是因为 VirtualizedList 已经嵌套在了一个 ScrollView 中，而 VirtualizedList 本身也是一个 ScrollView。两个 ScrollView 的滑动事件会发生冲突，导致无法正常滑动。

为了解决这个问题，我们需要将 VirtualizedList 放入另一个支持 ScrollView 的容器中，例如 SectionList。

以下是示例代码：

import React, { Component } from 'react';
import { SectionList, View, Text } from 'react-native';

class Example extends Component {
  render() {
    const data = [
      { title: 'List 1', data: ['Item 1-1', 'Item 1-2', 'Item 1-3'] },
      { title: 'List 2', data: ['Item 2-1', 'Item 2-2', 'Item 2-3'] },
      { title: 'List 3', data: ['Item 3-1', 'Item 3-2', 'Item 3-3'] },
    ];

    return (
      <SectionList
        sections={data}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Text>{item}</Text>}
        renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
      />
    );
  }
}

export default Example;

在上面的代码中，我们使用了 SectionList，将多个 VirtualizedList 放在了同一个滚动视图中。这样就可以正常滑动了。

在开发过程中，我们需要注意 VirtualizedList 与 ScrollView 的使用场景，避免出现冲突和卡顿等问题。