为啥获取 scrollIntoView 不是函数

Posted 2023-02-25

【中文标题】为啥获取 scrollIntoView 不是函数

【英文标题】：Why get scrollIntoView is not a function为什么获取 scrollIntoView 不是函数

【发布时间】：2020-12-09 22:19:09

【问题描述】：

这是一个简单的问题，我只是不明白为什么我得到“不是很多 ref 函数的函数。

我像这样声明使用 ref 变量：

 const massageTypeRef = useRef();

现在我在页面顶部有 Text 组件： 选择类型： 3.我在底部有另一个按钮，我希望在单击按钮时，将用户一直带到 Text 组件。 在我的底部按钮中：

  <AnimatedButton
             onPress=() => massageTypeRef.current.scrollIntoView()/// 
 here i dont know why i get is not a function
              pass
             icon="arrow-up"
             buttonStyle=styles.problembutton
             textStyle=styles.problembuttontext
         />

我尝试了很多方法，例如：

onPress=() =>
                    massageTypeRef.current.scrollIntoView(
                        behavior: "smooth",
                    )

和：

onPress=() =>
                    massageTypeRef.current.scrollTo()
                    )

但我总是得到：TypeError：massageTypeRef.current.scrollIntoView 不是函数。 （在'massageTypeRef.current.scrollIntoView()'中，'massageTypeRef.current.scrollIntoView'未定义）

---

我在世博会上做了一个小吃来展示我想做的事情，出于某种原因，我的工作很完美，当我在我的项目中做同样的事情时，它给我的信息是“不是一个函数......” 这是小吃https://snack.expo.io/OYWlNQwP4

这里链接到我的 github 组件和项目：https://github.com/roeigr7/LIOR/blob/main/src/screens/MeetingPickerScreen.js

【参考方案1】：

您应该使用具有适当功能的 ScrollView，例如 scrollTo 而不是 View，并且 ScrollView 的高度必须大于屏幕高度

https://reactnative.dev/docs/scrollview#snaptoend

import React,  useRef, useState  from 'react';
import  Button, Text, View, StyleSheet, ScrollView  from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import  Card  from 'react-native-paper';

export default function App() 
  const myref = useRef();
  return (
    <ScrollView ref=myref>
      <View style=styles.txt>
        <Text style=styles.text>TEXT THAT THE REF NEED TO GO TO </Text>
      </View>
      <View></View>
      <Button
        title="when press go up to text comp"
        onPress=() => 
          myref.current.scrollTo(0);
        
      />
    </ScrollView>
  );

const styles = StyleSheet.create(
  text: 
    color: 'black',
    padding: 20,
    backgroundColor: 'grey',
  ,
  txt: 
    minHeight: 1600,
    backgroundColor: 'white',
  ,
);

【讨论】：

好的。但是我的组件在另一个滚动视图中，它给了我错误。我该如何处理？

或者有一个使用元素引用的视图函数？