React Native嵌套FlatList滚动卡顿求助：TextInput聚焦时恢复流畅

1. 优化FlatList渲染性能 #

• 开启removeClippedSubviews减少离屏组件渲染，同时调整渲染批次参数控制单次渲染数量：

  <FlatList
    horizontal
    removeClippedSubviews={true}
    maxToRenderPerBatch={4}
    windowSize={5}
    initialNumToRender={3}
    // 其他属性
  />
  

• 给FlatList设置固定的style宽高，避免React Native频繁计算布局占用资源。

2. 隔离ScrollView与FlatList的滚动事件冲突 #

• 监听FlatList的滚动状态，临时禁用ScrollView的滚动能力，避免滚动事件抢占：

  const [scrollViewEnabled, setScrollViewEnabled] = useState(true);
  
  <ScrollView scrollEnabled={scrollViewEnabled}>
    {/* 表单其他元素 */}
    <FlatList
      horizontal
      onScrollBeginDrag={() => setScrollViewEnabled(false)}
      onScrollEndDrag={() => setScrollViewEnabled(true)}
      onTouchEnd={() => setScrollViewEnabled(true)}
      // 其他属性
    />
    {/* 表单其他元素 */}
  </ScrollView>
  

3. 图片渲染优化 #

• 给所有图片设置固定的width和height，并指定resizeMode，减少布局计算开销：

  <Image
    source={mockImage}
    style={{width: 80, height: 80, borderRadius: 8}}
    resizeMode="cover"
  />
  

• 替换原生Image为FastImage组件，利用原生线程处理图片加载与缓存，降低JS线程压力。

4. 避免不必要的重渲染 #

• 用React.memo包裹FlatList的子组件，仅在props变化时重渲染：

  const ImageItem = React.memo(({item}) => (
    <Image source={item} style={{width: 80, height: 80}} />
  ));
  

• 用useCallback缓存renderItem、keyExtractor等函数，防止父组件重渲染时创建新函数触发子组件更新：

  const renderItem = useCallback(({item}) => <ImageItem item={item} />, []);
  const keyExtractor = useCallback((_, index) => index.toString(), []);
  

5. 调整线程调度优先级 #

• 利用InteractionManager延迟FlatList的渲染，等表单初始化或交互完成后再加载列表：

  const [isListReady, setIsListReady] = useState(false);
  
  useEffect(() => {
    InteractionManager.runAfterInteractions(() => {
      setIsListReady(true);
    });
  }, []);
  
  return (
    <ScrollView>
      {/* 表单其他元素 */}
      {isListReady && <FlatList horizontal data={mockData} renderItem={renderItem} />}
    </ScrollView>
  );
  

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