反应本地同步两个滚动视图

Question

React Native中是否有一种方法可以同步两个或多个滚动视图，使它们彼此跟随？我已经看到了一些用于Objective-C的实现，但是不知道如何实现本机响应。

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

我也尝试了一些与这个要点类似的东西，但它的行为很奇怪，因为滚动位置的听众总是影响两个ScrollViews。

为此，我受到了有关如何在 javascript 中执行此操作的答案的启发。

Answer 2

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