动画 – React Native粘性行和标题滚动性能？

发布时间：2020-12-15 20:32:15 所属栏目：百科来源：网络整理

导读：我拼凑了Microsoft Excel的工作版本,如“冻结痛苦”视图.列标题水平滚动内容,行标题垂直滚动内容,但当滚动另一个时,每个标题都“卡在”位置. You can try the working version here. 它不是最佳的,因为如果你停止一个轻弹的滚动或只是滑动很多东西它会口吃.

我拼凑了Microsoft Excel的工作版本,如“冻结痛苦”视图.列标题水平滚动内容,行标题垂直滚动内容,但当滚动另一个时,每个标题都“卡在”位置.

You can try the working version here.
它不是最佳的,因为如果你停止一个轻弹的滚动或只是滑动很多东西它会口吃.

该方法使用了几种技术,但导致问题的方法是同步滚动视图.

As outlined here,我尝试过设置useNativeDriver：true,这需要改变
ScrollView到Animated.ScrollView和
ref = {ref => (this.instance = ref)}来ref = {ref => (this.instance = ref._component)}
但随后同步完全失控了.

我喜欢更优化方法的想法.如何改进？

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

export default class SyncScrollTest extends React.Component {
  constructor() {
    super();
    this.scrollPosition = new Animated.Value(0);
    this.scrollEvent = Animated.event(
      [{ nativeEvent: { contentOffset: { y: this.scrollPosition } } }],{ useNativeDriver: false },);
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flexDirection: 'row' }}>
          <ScrollViewVerticallySynced
            style={{ width: 50,marginTop: 60 }}
            name="C1"
            color="#F2AFAD"
            onScroll={this.scrollEvent}
            scrollPosition={this.scrollPosition}
          />
          <ScrollView horizontal bounces={false}>
            <View style={{ width: 600 }}>
              <View style={{ height: 60,justifyContent: 'center',backgroundColor: '#B8D2EC' }}>
                <Text>
                  I am Column Header!! I am Column Header!! I am Column Header!! I am Column
                  Header!! I am Column Header!! I am Column Header!! I am Column Header!!
                </Text>
              </View>
              <ScrollViewVerticallySynced
                style={{ width: 600 }}
                name="C2"
                color="#D9E4AA"
                onScroll={this.scrollEvent}
                scrollPosition={this.scrollPosition}
              />
            </View>
          </ScrollView>
        </View>
      </View>
    );
  }
}

class ScrollViewVerticallySynced extends React.Component {
  componentDidMount() {
    this.listener = this.props.scrollPosition.addListener((position) => {
      this.instance.scrollTo({
        y: position.value,animated: false,});
    });
  }

  render() {
    const { name,color,style,onScroll } = this.props;
    return (
      <ScrollView
        key={name}
        ref={ref => (this.instance = ref)}
        style={style}
        scrollEventThrottle={1}
        onScroll={onScroll}
        bounces={false}
        showsVerticalScrollIndicator={false}
      >
        {someRows(name,25,color)}
      </ScrollView>
    );
  }
}

const someRows = (name,rowCount,color) =>
  Array.from(Array(rowCount).keys()).map(index =>
    (<View
      key={`${name}-${index}`}
      style={{
        height: 50,backgroundColor: index % 2 === 0 ? color : 'white',flex: 1,alignItems: 'center',}}
    >
      <Text>
        {name} R{index + 1}
      </Text>
    </View>),);

“`

解决方法

我改变了你的例子,而不是使用监听器和动画事件我使用 ScrollView的scrollTo方法来同步滚动.我认为在滚动时,侦听器是行之间滞后的原因.

您可以测试更改here.

import React from 'react';
import { ScrollView,View } from 'react-native';
import { Constants } from 'expo'

export default class SyncScrollTest extends React.Component {
  constructor() {
    super();
    this.c1IsScrolling = false;
    this.c2IsScrolling = false;

  }

  render() {
    return (
      <View style={{ flex: 1,marginTop: Constants.statusBarHeight }}>
        <View style={{ flexDirection: 'row' }}>
          <ScrollViewVerticallySynced
            style={{ width: 50,marginTop: 60 }}
            refe= {ref => (this.c2View = ref)}
            name="C1"
            color="#F2AFAD"
            onScroll={e => {
                if (!this.c1IsScrolling) {
                  this.c2IsScrolling = true;
                  var scrollY = e.nativeEvent.contentOffset.y;
                  this.c1View.scrollTo({ y: scrollY });
                }
                this.c1IsScrolling = false;
              }}

          />
          <ScrollView horizontal bounces={false}>
            <View style={{ width: 400 }}>
              <View style={{ height: 60,backgroundColor: '#B8D2EC' }}>
                <Text>
                  I am Column Header!! I am Column Header!! I am Column Header!! I am Column
                  Header!! I am Column Header!! I am Column Header!! I am Column Header!!
                </Text>
              </View>
              <ScrollViewVerticallySynced
                style={{ width: 400 }}
                refe= {ref => (this.c1View = ref)}
                name="C2"
                color="#D9E4AA"
                onScroll= {e => {
                  if (!this.c2IsScrolling) {
                    this.c1IsScrolling = true;
                    var scrollY = e.nativeEvent.contentOffset.y;
                    this.c2View.scrollTo({ y: scrollY });
                  }
                  this.c2IsScrolling = false;
                }}

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

class ScrollViewVerticallySynced extends React.Component {
  render() {
    const { name,onScroll,refe } = this.props;
    return (
      <ScrollView
        key={name}
        ref={refe}
        style={style}
        scrollEventThrottle={1}
        onScroll={onScroll}
        bounces={false}
        showsVerticalScrollIndicator={false}
      >
        {someRows(name,color)}
      </ScrollView>
    );
  }
}


const someRows = (name,);

你可以找到另一个例子here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!