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

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

【问题讨论】:

标签: react-native


【解决方案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】:
  1. 根据this answer获取其中之一滚动时的滚动位置
  2. 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
          });
        }
      }  
      >
    ...
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-01-25
      • 2021-10-04
      • 1970-01-01
      • 2011-12-13
      • 1970-01-01
      • 1970-01-01
      • 2016-03-18
      相关资源
      最近更新 更多