React Native：DrawerNavigator滚动卡顿，StackNavigator滚动流畅问题咨询

我之前在开发 React Native 应用时也碰到过一模一样的场景——同一个列表组件在 StackNavigator 里丝滑滚动，放到 DrawerNavigator 里就变得卡顿生硬，快速滑动时完全没有惯性滚动。结合你的描述（Feed 组件渲染大量行元素），给你几个针对性的排查和解决方向：

1. 优先用虚拟化列表替代普通滚动容器 #

如果你的 Feed 组件是用 ScrollView 直接包裹几十上百个行元素，卡顿几乎是必然的——ScrollView 会一次性渲染所有子元素，不管是否在可视区域内。而 FlatList/SectionList 是 React Native 专门为长列表设计的虚拟化组件，只会渲染当前屏幕可见（加上预加载区域）的元素，能极大降低内存占用和渲染耗时。

改造示例：

// 原来的卡顿版 Feed
function Feed() {
  return (
    <ScrollView>
      {Array(100).fill(0).map((_, index) => (
        <View key={index} style={styles.row}>
          <Text>Row {index}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

// 优化后的流畅版 Feed
function Feed() {
  const data = Array(100).fill(0).map((_, index) => ({ id: index, text: `Row ${index}` }));
  
  // 用 React.memo 包裹行组件，避免不必要重渲染
  const RowItem = React.memo(({ text }) => (
    <View style={styles.row}>
      <Text>{text}</Text>
    </View>
  ));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <RowItem text={item.text} />}
      keyExtractor={item => item.id.toString()}
      // 额外性能优化参数
      removeClippedSubviews={true} // 自动移除不可见区域的元素
      windowSize={5} // 控制预加载的屏幕数量，值越小越省性能
    />
  );
}

2. 优化 DrawerNavigator 的容器配置 #

有时候 DrawerNavigator 的默认样式或手势设置会干扰子页面的滚动行为，可以尝试调整 screenOptions：

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerContentContainerStyle: {
          flex: 1,
          overflow: 'visible', // 避免不必要的裁剪影响滚动
        },
        // 限制抽屉手势触发区域，避免和列表滚动冲突
        gestureResponseDistance: { horizontal: 80 },
      }}
    >
      <Drawer.Screen name="Feed" component={Feed} />
    </Drawer.Navigator>
  );
}

3. 排查嵌套滚动冲突（Android 专属） #

如果你的抽屉菜单本身也是长列表，可能会和 Feed 页面的滚动产生冲突。可以给 Feed 的 FlatList 加上 nestedScrollEnabled={true} 属性，让嵌套滚动更顺畅。

4. 升级 React Navigation 版本 #

旧版本的 DrawerNavigator 存在不少滚动性能相关的 bug，建议升级到 React Navigation 6.x 系列的最新稳定版，很多旧问题已经被官方修复。

内容的提问来源于stack exchange，提问作者mehulmpt