Почему get scrollIntoView не является функцией
это простой вопрос, я просто не понимаю, почему я получаю «не является функцией многих функций ref.
я объявляю использовать переменную ref так:
const massageTypeRef = useRef();Теперь у меня есть текстовый компонент вверху страницы: Выберите тип: 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
Ответы 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',
},
});
Или есть функция для просмотра, которая использует ссылку на элемент?
Хорошо. Но мой компонент находится внутри другого представления прокрутки, и это дает мне ошибки. Как я могу справиться с этим?