React Native 同步两个滚动视图

Question

在React Native中，是否有一种方法可以同步两个或多个滚动视图，使其相互跟随？我看到了一些针对objective-c的实现方式，但不知道如何在React Native中实现。

- FreeJ

---

如果有人仍在寻找答案，这里是一个可能的实现：https://gist.github.com/jevakallio/e95b8ee3c649eb64b2dc768be9375e11 - Moinul Hossain

Answer 1

到目前为止，我发现最清洁和问题最少的是这个。

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

function Squares(props) {
    var squares = []
    for (var i = 0; i < props.numRows; i++) {
        squares.push(<View style={{ height: 50, backgroundColor: props.color1 }}><Text>{i}</Text></View>)
        squares.push(<View style={{ height: 50, backgroundColor: props.color2 }}><Text>{i}</Text></View>)
    }
    return squares
}

export default class App extends Component {
    constructor(props) {
        super(props)
        this.leftIsScrolling = false
        this.rigthIsScrolling = false
    }
    render() {
        return (
            <View
                style={{ flex: 1, alignItems: 'flex-start', backgroundColor: 'yellow' }}>
                <View style={{ backgroundColor: '#bbb', flexDirection: 'row' }}>

                    <ScrollView
                        scrollEventThrottle={16}
                        ref={scrollView => { this._leftView = scrollView }}
                        onScroll={e => {
                            if (!this.leftIsScrolling) {
                                this.rigthIsScrolling = true
                                var scrollY = e.nativeEvent.contentOffset.y
                                this._rightView.scrollTo({ y: scrollY })
                            }
                            this.leftIsScrolling = false
                        }}>
                        <Squares numRows={20} color1={"green"} color2={"darkgreen"} />
                    </ScrollView>

                    <ScrollView
                        ref={scrollView => { this._rightView = scrollView }}
                        scrollEventThrottle={16}
                        onScroll={e => {
                            if (!this.rigthIsScrolling) {
                                this.leftIsScrolling = true
                                var scrollY = e.nativeEvent.contentOffset.y
                                this._leftView.scrollTo({ y: scrollY })
                            }
                            this.rigthIsScrolling = false
                        }}>
                        <Squares numRows={20} color1={"red"} color2={"darkred"} />

                    </ScrollView>
                </View>
            </View>
        )
    }
}

我也尝试过类似于这个代码片段，但由于滚动位置中的监听器始终影响两个ScrollView，因此它的行为很奇怪。

对此，我受到了这个答案的启发，该答案讲述了如何在javascript中实现此功能。

- rsilva4

---

会导致iOS上奇怪的“弹跳”。由于scrollTo在iOS上不是同步移动，但设置this.leftIsScrolling = false;是同步移动。 - Halt

Answer 2

1. 根据这个答案，获取其中一个滚动时的滚动位置。
2. 使用ScrollView.scrollTo来设置另一个的滚动位置。

- Milan Gulyas

---

它能工作，但由于运动太过颠簸，实际上并不切实际。 - JCraine

这将同步第一个滚动视图到第二个，但您将无法将第二个同步到第一个，因为这将创建一个循环。 - Maximilian Dietel

Answer 3

所有这些答案都有点不太靠谱，无法将具有不同方向或大小/长度的ScrollView进行同步。我发现了一个短短3分钟的视频，使用了一种更干净、更可靠的方法

- Maximilian Dietel

Answer 4

使用 refs：

let firstRef: ScrollView | null;
let secondRef: ScrollView | null;

<ScrollView
  ref={ref => (firstRef = ref)}>
...

<ScrollView
  ref={ref => (secondRef = ref)}
  onScroll={e => {
    if(firstRef) {
      firstRef.scrollTo({
      x: e.nativeEvent.contentOffset.x,
      y: e.nativeEvent.contentOffset.y,
      animated: false
      });
    }
  }  
  >
...

- NKurzweil

Answer 5

<ScrollView>
  <ScrollView nestedScrollEnabled={true}>
  </ScrollView>
</ScrollView>

从谷歌获取视频参考，以便解释它的工作原理。

- Deepak Singh

---

请勿仅仅发布代码，还需解释代码的功能以及如何解决问题。带有解释的答案通常更有帮助、质量更高，并且更容易吸引赞同。 - Mark Rotteveel