为什么获取 scrollIntoView 不是函数

Question

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

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

    const massageTypeRef = useRef();
   

2. 现在我在页面顶部有 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

Answer 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',
  },
});