两水平行同步滚动

Question

我正在开发一个 React Native 项目，其中有一条水平线的项目，应该分为两行。第一行包含前 6 个块，第二行包含其余块。两行需要一起滚动，就好像只有一个滚动行为控制两行，而不是每一行独立滚动。

总结一下：

• 第一行应包含前 6 项。
• 第二行包含剩余的项目，包括那些最初由于滚动而不可见的项目。
• 用户滚动一次，两行都会响应滚动。
• 行之间存在视觉分隔，类似于换行符（HTML 中的

  br

  ），但它们仍然依赖于相同的滚动。

如何在 React Native 中使用单个 ScrollView 实现滚动行为？

我尝试过使用 2 个 ScrollView，但这仍然不是获得良好同步滚动的最佳方法。 滚动视图：

      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.blocLogoNonAffiliates}
        ref={scrollRefTop}
        onScroll={handleScrollTop}
        scrollEventThrottle={5} // Lisse le défilement
        onScrollBeginDrag={() => setIsScrollingTop(true)}
        onScrollEndDrag={() => setIsScrollingTop(false)}
      >
        <View style={styles.containerBlocImages}>
          {listData.map((item, index) => (
            <View key={index} style={styles.blocImageNonAffiliates}>
              <Text>{item}</Text>
            </View>
          ))}
        </View>
      </ScrollView>

      {/* Deuxième ScrollView, commence à partir de la position 7 */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.blocLogoNonAffiliates}
        ref={scrollRefBottom}
        onScroll={handleScrollBottom}
        scrollEventThrottle={5} // Lisse le défilement
        onScrollBeginDrag={() => setIsScrollingBottom(true)}
        onScrollEndDrag={() => setIsScrollingBottom(false)}
      >
        <View style={styles.containerBlocImages}>
          {listData.slice(6).map((item, index) => (
            <View key={index} style={styles.blocImageNonAffiliates}>
              <Text>{item}</Text>
            </View>
          ))}
        </View>
      </ScrollView>

我的职能：

  // Fonction pour synchroniser les scrolls
  const handleScrollTop = (event) => {
    if (!isScrollingBottom) {
      setIsScrollingTop(true);
      const offsetX = event.nativeEvent.contentOffset.x;
      scrollRefBottom.current?.scrollTo({ x: offsetX, animated: false });
      setIsScrollingTop(false);
    }
  };

  const handleScrollBottom = (event) => {
    if (!isScrollingTop) {
      setIsScrollingBottom(true);
      const offsetX = event.nativeEvent.contentOffset.x;
      scrollRefTop.current?.scrollTo({ x: offsetX, animated: false });
      setIsScrollingBottom(false);
    }
  };

Answer 1

它需要一个简单的解决方案。考虑以下代码并根据您的要求进行修改。

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

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

const Row = ({data = []}) => {
    const renderItem = (item) => {
        return (
            <View key={item} style={styles.item}>
                <Text>{item}</Text>
            </View>
        );
    };

    return <View style={styles.row}>{data.map(renderItem)}</View>;
};

const Screen = () => {
    return (
        <View style={styles.container}>
            <ScrollView horizontal>
                <View>
                    <Row key={'r1'} data={list.slice(0, 6)} />
                    <Row key={'r2'} data={list.slice(6)} />
                </View>
           </ScrollView>
       </View>
    );
};

export default Screen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    row: {
        flexDirection: 'row',
    },
    item: {
        width: 100,
        height: 100,
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10,
    },
});