Reactネイティブのスティッキー行とヘッダースクロールのパフォーマンス？

Question

「フリーズ・ペインズ」ビューのようなMicrosoft Excelの作業用バージョンを一緒に飾ってあります。列見出しはコンテンツと共に水平方向にスクロールし、行ヘッダーはコンテンツを垂直方向にスクロールしますが、それぞれがスクロールされると、それぞれの位置に「固定」されます。

フリックスクロールを停止したり、多くの周りをスワイプしたりすると、不自然になるので最適ではありません。

アプローチは2つの手法を使用しますが、問題を引き起こすのは同期されたスクロールビューです。

As outlined here、私はref={ref => (this.instance = ref._component)} にAnimated.ScrollViewから
ScrollViewと
ref={ref => (this.instance = ref)}を変更したが、その後同期必要とされ、useNativeDriver: trueを設定しようとしましたが、完全にめちゃくちゃになります。

私はより最適なアプローチに関するアイデアが大好きです。どのように改善することができますか？

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

私の代わりに私がスクロールを同期させるためにScrollViewからscrollToメソッドを使用し、リスナーとアニメーションイベントを使用しての、あなたの例を変更しました。私は、スクロールしているときに、リスナーが行間の遅れの原因だと思う。

hereの変更をテストできます。

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

あなたはhere