React Native实现双行同步滚动（单ScrollView方案）

双ScrollView做同步滚动很容易出现延迟、抖动甚至滚动不同步的问题，核心原因是通过事件监听+scrollTo的模拟同步无法达到原生滚动的精度。改用单个ScrollView可以彻底解决这个问题，思路是把两行内容放进同一个横向滚动容器里，利用原生滚动特性实现完美同步。

实现步骤 #

1. 拆分数据：将列表拆分为前6个元素（首行）和剩余元素（第二行）
2. 构建滚动结构：用一个横向ScrollView包裹垂直排列的两行内容，每行的内容容器设置足够宽度以支持横向滚动
3. 添加视觉分隔：在两行之间插入分隔元素，实现类似<br>的视觉效果
4. 原生同步滚动：两行都在同一个ScrollView内，滚动时自然同步，无需额外同步逻辑

完整代码示例 #

import React from 'react';
import { View, ScrollView, Text, StyleSheet } from 'react-native';

const SyncTwoRowScroll = ({ listData }) => {
  // 拆分数据为两行
  const topRowItems = listData.slice(0, 6);
  const bottomRowItems = listData.slice(6);
  // 单个元素的固定宽度（根据实际UI需求调整）
  const ITEM_WIDTH = 80;

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      style={styles.scrollWrapper}
    >
      {/* 垂直容器包裹两行，确保上下排列 */}
      <View style={styles.twoRowWrapper}>
        {/* 首行容器：宽度=元素数量×单个元素宽度 */}
        <View style={[styles.rowContainer, { width: topRowItems.length * ITEM_WIDTH }]}>
          {topRowItems.map((item, idx) => (
            <View key={`top-${idx}`} style={styles.itemBox}>
              <Text>{item}</Text>
            </View>
          ))}
        </View>

        {/* 两行之间的视觉分隔线 */}
        <View style={styles.divider} />

        {/* 第二行容器：宽度=剩余元素数量×单个元素宽度 */}
        <View style={[styles.rowContainer, { width: bottomRowItems.length * ITEM_WIDTH }]}>
          {bottomRowItems.map((item, idx) => (
            <View key={`bottom-${idx}`} style={styles.itemBox}>
              <Text>{item}</Text>
            </View>
          ))}
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollWrapper: {
    // 容器高度=首行高度+分隔线高度+第二行高度+上下内边距
    height: 180,
    paddingVertical: 10,
  },
  twoRowWrapper: {
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  rowContainer: {
    flexDirection: 'row',
    flexWrap: 'nowrap', // 强制元素横向排列不换行
  },
  itemBox: {
    width: 80,
    height: 60,
    marginHorizontal: 10,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 4,
  },
  divider: {
    height: 1,
    backgroundColor: '#f0f0f0',
    marginVertical: 10,
    // 分隔线宽度可设为ScrollView可视宽度，或与行容器一致
    width: '100%',
  },
});

export default SyncTwoRowScroll;

关键细节说明 #

• 滚动同步原理：包含两行的垂直容器作为ScrollView的子元素，滚动时垂直容器整体横向移动，两行自然同步，完全是原生滚动效果，无任何延迟
• 行宽计算：每行容器宽度必须设为该行所有元素的总宽度，否则ScrollView无法正确计算可滚动区域
• 动态宽度适配：若元素宽度不固定，可通过useLayoutEffect结合measure方法动态计算每行总宽度，或用FlatList替代View渲染行内元素，利用contentContainerStyle控制宽度
• 视觉分隔：示例用灰色分隔线，可根据需求换成间距（设置marginVertical）或其他视觉样式

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