React Native 同步两个滚动视图答案

【问题标题】：React Native Sync Two ScrollviewsReact Native 同步两个滚动视图
【发布时间】：2016-01-18 21:12:45
【问题描述】：

React Native 中有没有办法同步两个或多个滚动视图，以便它们相互跟随？我已经看到了一些 Objective-c 的实现，但不知道如何为 react native 实现。

【问题讨论】：

如果有人还在寻找答案，这里有一个可能的实现：gist.github.com/jevakallio/e95b8ee3c649eb64b2dc768be9375e11

【解决方案1】：

到目前为止，我发现的最干净且问题更少的是this：

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>
        )
    }
}

我也尝试过类似gist 的方法，但它的行为很奇怪，因为滚动位置的侦听器总是影响两个ScrollViews。

为此，我受到answer 的启发，了解如何在 javascript 中进行操作。

【讨论】：

会导致 ios 出现奇怪的“反弹”。由于scrollTo 不是ios 上的同步移动，但设置this.leftIsScrolling = false; 是同步移动。

【解决方案2】：

根据this answer获取其中之一滚动时的滚动位置
用ScrollView.scrollTo 设置另一个上的滚动位置

【讨论】：

【解决方案3】：

使用参考：

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
      });
    }
  }  
  >
...

【讨论】：