Animation 反应本机粘性行和标题滚动性能？

我已经拼凑出了一个类似于微软Excel的“冻结痛苦”视图的工作版本。列标题与内容水平滚动，行标题与内容垂直滚动，但在滚动另一个标题时，每个标题都“卡”在位置上

它不是最优的，因为如果你停止一个轻弹的卷轴或只是四处滑动，它会结巴

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

，我已尝试设置

useNativeDriver:true

，这需要更改

ScrollView

到

动画。ScrollView

和

ref={ref=>（this.instance=ref）}

to

ref={ref=>（this.instance=ref.\u 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>),
  );

从“React”导入React；
从“react native”导入{ScrollView，动画，文本，视图}；
导出默认类SyncScrollTest扩展React.Component{
构造函数（）{
超级（）；
this.scrollPosition=新的动画.Value（0）；
this.scrollEvent=Animated.event(
[{nativeEvent:{contentOffset:{y:this.scrollPosition}}}]，
{useNativeDriver:false}，
);
}
render（）{
返回(
我是列标题！！我是列标题！！我是列标题！！我是列标题
标题！！我是列标题！！我是列标题！！我是列标题！！
);
}
}
类ScrollViewVerticallySynced扩展React.Component{
componentDidMount（）{
this.listener=this.props.scrollPosition.addListener（（位置）=>{
this.instance.scrollTo({
y:位置，价值，
动画：错，
});
});
}
render（）{
const{name，color，style，onScroll}=this.props；
返回(
（this.instance=ref）}
style={style}
scrollEventThrottle={1}
onScroll={onScroll}
反弹={false}
showsVerticalScrollIndicator={false}
>
{someRows（名称，25，颜色）}
);
}
}
const someRows=（名称、行数、颜色）=>
从（数组（rowCount）.keys（））.map（索引=>
(
{name}R{index+1}
),
);

---

```

我更改了您的示例，我没有使用侦听器和动画事件，而是使用

scrollTo

方法来同步滚动。我认为在滚动时，侦听器是导致行之间延迟的原因

您可以测试更改

从“React”导入React；
从“react native”导入{ScrollView，Text，View}；
从“expo”导入{Constants}
导出默认类SyncScrollTest扩展React.Component{
构造函数（）{
超级（）；
此.c1iscrolling=false；
这个.c2IsScrolling=false；
}
render（）{
返回(
（this.c2View=ref）}
name=“C1”
color=“#F2AFAD”
onScroll={e=>{
如果（！this.c1iscrowling）{
这个.c2iscrolling=true；
var scrollY=e.nativeEvent.contentOffset.y；
this.c1View.scrollTo（{y:scrollY}）；
}
此.c1iscrolling=false；
}}
/>
我是列标题！！我是列标题！！我是列标题！！我是列标题
标题！！我是列标题！！我是列标题！！我是列标题！！
（this.c1View=ref）}
name=“C2”
color=“#D9E4AA”
onScroll={e=>{
如果（！this.c2iscrowling）{
this.c1iscrolling=true；
var scrollY=e.nativeEvent.contentOffset.y；
this.c2View.scrollTo（{y:scrollY}）；
}
这个.c2IsScrolling=false；
}}
/>
);
}
}
类ScrollViewVerticallySynced扩展React.Component{
render（）{
const{name，color，style，onScroll，refe}=this.props；
返回(
{someRows（名称，25，颜色）}
);
}
}
const someRows=（名称、行数、颜色）=>
从（数组（rowCount）.keys（））.map（索引=>
(
{name}R{index+1}
),
);

---

您可以找到另一个示例

您的代码在设备上运行平稳，但在模拟器上运行不平稳。你碰巧发现了吗？我正试图完成同样的事情，但没有运气。出于某种原因，这会让我的滚动行为比OP的原始版本更糟糕。我有什么做错了吗？我已经用这两种设备制作了点心，并在模拟器和真实设备上进行了测试。

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>),
  );