Javascript FlatList React Native中的Smooth scrollToOffset

我曾尝试将scroll two

Flatlist

与state同步，但我的想法是，由于重新渲染，滚动会抖动、滞后且不平滑。但我尝试了引用React元素，但没有效果。结果是一样的，滚动就像一个人被电击，也就是说，摇晃

代码如下：

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Button } from 'react-native';
import Constants from 'expo-constants';

export default function App() {

  const listRefOne = React.useRef();
  const listRefTwo = React.useRef();

  const handleRef = (listRef, offset) => {

    if (listRef === listRefOne) {
      listRefTwo.current.scrollToOffset({ animated: true, offset: offset });
      console.log('One', offset);
    }

    if (listRef === listRefTwo) {
      listRefOne.current.scrollToOffset({ animated: true, offset: offset });
      console.log('Two', offset);
    }

  };

  return (
    <View style={styles.container}>

      <MyListView listRef={listRefOne} handleRef={handleRef} />
      <MyListView listRef={listRefTwo} handleRef={handleRef} />

    </View>
  );
}

const generateData = () => {
  const temp = [];
  for (var i = 1; i <= 100; i++) {
    temp.push({ id: i, title: `# ${i} Hello` });
  }
  return temp;
};

const mydata = generateData();

const MyListView = ({ listRef, handleRef }) => {

  const handleScroll = (offset) => handleRef(listRef, offset);

  return (
    <FlatList
      ref={(list) => {
        listRef.current = list;
      }}
      style={styles.itemView}
      data={mydata}
      renderItem={({ item }) => (
        <Text style={{ fontSize: 20 }}>{item.title}</Text>
      )}
      keyExtractor={(item) => item.id}
      onScroll={(e) => handleScroll(e.nativeEvent.contentOffset.y)}
    />

  );
};

const styles = StyleSheet.create({
  container: {
    flex: 2,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  itemView: {
    flexGrow: 1,
    backgroundColor: '#efefef',
    margin: 3,
  },
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、平面列表、按钮}；
从“expo常量”导入常量；
导出默认函数App（）{
const listRefOne=React.useRef（）；
const listreftow2=React.useRef（）；
常量handleRef=（listRef，offset）=>{
如果（listRef==listRefOne）{
listRefTwo.current.scrollToOffset（{animated:true，offset:offset}）；
console.log（'1'，偏移量）；
}
如果（listRef==listRefTwo）{
listRefOne.current.scrollToOffset（{animated:true，offset:offset}）；
console.log（'2'，偏移量）；
}
};
返回(
);
}
const generateData=（）=>{
常数温度=[]；
对于（var i=1；i{
const handleScroll=（offset）=>handleRef（listRef，offset）；
返回(
{
listRef.current=列表；
}}
style={styles.itemView}
数据={mydata}
renderItem={（{item}）=>(
{item.title}
)}
keyExtractor={（项）=>item.id}
onScroll={（e）=>handleScroll（e.nativeEvent.contentOffset.y）}
/>
);
};
const styles=StyleSheet.create({
容器：{
弹性：2，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
项目视图：{
flexGrow:1，
背景颜色：“#efefef”，
差额：3，
},
});