React-Native：Ref 缺少 FlatList 的 scrollToIndex()

Question

我正在将引用传递给 FlatList 并期望访问 scrollToIndex() 函数，但它没有出现在控制台中，当我尝试使用它时它抛出错误说“scrollTo() is not一个函数”，它甚至没有意识到我正在尝试使用 scrollToIndex()。

这是我代码中的一个简单用法示例：

const ref = useRef()

ref.current?.scrollToIndex({index:itemIndex,animated:true})

<FlatList ref={ref} .../>

有没有人经历过这个并且知道如何让它发挥作用？我查看了文档和示例，一切似乎都很好。如有任何帮助，我们将不胜感激！

更新：

组件：

import React from "react";
import { View, FlatList, ImageBackground,TouchableOpacity,ScrollView,StyleSheet, Text} from "react-native";


const Projects = ({ index, navigation }) => {
 const {width} = Dimensions.get("window")
  const [imageIndex, setIndex] = React.useState(0)
  const ref = React.useRef()
  const wItem = (width - 63) / 2;
console.log("index projects", imageIndex)


const scrollToIndex = (index)=>{
  if(ref.current){
    ref.current.scrollToIndex({index:index})
  }
}
 
const goToIndex = React.useCallback((info) => {
  const wait = new Promise(resolve => setTimeout(resolve, 200));
  wait.then(() => {
    ref.current?.scrollToIndex({ index: info.index, animated: true });
  })
}, [])

  return (
  
      <ScrollView >
      <TouchableOpacity onPress={()=> scrollToIndex(5)}><Text>Scroll to</Text></TouchableOpacity>
      <FlatList ref={ref}
      nestedScrollEnabled
        numColumns={2}
        data={DATA}
        onScrollToIndexFailed={(index)=>goToIndex(index)}
        style={styles.flatList}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({ item, index }) => (
          <View style={styles.item}>
            <ImageBackground
              source={item.image}
              /* @ts-ignore */
              imageStyle={styles.imgStyle}
              style={{ width: wItem, height: wItem, alignItems: "flex-end" }}>
              
            </ImageBackground>
            </TouchableOpacity>
            <Text>{item.title}</Text>
          </View>
        )}
      />
    </ScrollView>
  
  );
};

export default Projects;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    marginRight: 15,
    marginBottom: 24,
    alignItems:'center'
   
  },
  flatList: {
    marginHorizontal: 24,
    marginTop: 16,
  },
  imgStyle: {
    borderRadius: 12,
  },
});

const DATA = [//本地图片列表]

Answer 1

无法调用scrollTo，因为ref在使用的时候只是初始化，没有赋值：

const ref = useRef()
// ref = null

ref.current?.scrollToIndex({index:itemIndex,animated:true})
// ref = null    

<FlatList ref={ref} .../>
// ref != null

因此在您第一次渲染之前不会分配 ref。这意味着如果你想在 ref 上调用 .scrollTo() ，你可以通过两种不同的方式进行：

1 - 如果您想最初滚动到某个索引：

useEffect(() => {
  const initialIndex = 34 //random number
  if (ref.current){
    ref.current.scrollToIndex({index: initialIndex})    
  }
}, [ref])

依赖数组中的 ref 将确保只要 ref 的值发生变化，useEffect 就会运行（在这种情况下，一旦它被分配给一个通过呈现 <Flatlist />

的值

2 - 如果你想按需滚动到某个索引：

const handleScrollTo = (index) => {
  if (ref.current && typeof ref.current.scrollToIndex === 'function'){
    ref.current.scrollToIndex({index: index})    
  }
}

这个函数应该连接到类似 onPress 或类似的东西，这意味着只要用户按下按钮就应该定义 ref 因为能够看到按钮并按下它需要组件有呈现。尽管 ref.current 在此处使用后就应该已经分配，但最好确保它不会在没有崩溃的情况下崩溃，这就是我们添加 if-statement 的原因.

React-Native：Ref 缺少 FlatList 的 scrollToIndex()

React-Native: Ref is missing scrollToIndex() for FlatList

ref

react-native

flatlist