0

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

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

     const massageTypeRef = useRef();

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

      <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

4

1 回答 1

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',
  },
});
于 2020-12-10T16:28:35.250 回答