反应本机同步两个滚动视图 [英] React Native Sync Two Scrollviews

问题描述

React Native 有没有办法同步两个或多个滚动视图，以便它们相互跟随?我见过一些 Objective-c 的实现，但不知道如何为 React Native 实现它.

Is there a way in React Native to sync two or more scrollviews so they follow each other? I've seen some implementations for objective-c but have no idea how to implement that for react native.

推荐答案

到目前为止，我发现的最干净、问题更少的是 这个:

So far the cleanest and less problematic I found was 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 的内容，但由于滚动位置的监听器总是影响两个ScrollView.

I have also tried something along the lines of this gist but it behaves strangely due to the listener in the scroll position is always affecting the two ScrollViews.

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

For this I was inspired by this answer on how to do it in javascript.

这篇关于反应本机同步两个滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！