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

Question

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

你可以在这里试试工作版.
它不是最佳的,因为如果你停止一个轻弹的滚动或只是滑动很多东西它会口吃.

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

由于这里列出,我已经试过设置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',
        justifyContent: 'center',
      }}
    >
      <Text>
        {name} R{index + 1}
      </Text>
    </View>),
  );

```

Answer 1

我更改了您的示例，而不是使用侦听器和动画事件，而是使用ScrollViewscrollTo中的方法来同步滚动。我认为侦听器是滚动时行之间出现滞后的原因。

您可以在此处测试更改。

import React from 'react';
import { ScrollView, Text, 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, 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: 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, color, style, onScroll, refe } = this.props;
    return (
      <ScrollView
        key={name}
        ref={refe}
        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',
        justifyContent: 'center',
      }}
    >
      <Text>
        {name} R{index + 1}
      </Text>
    </View>),
  );

你可以在这里找到另一个例子