Я добавил кнопку на простой экран, и я хочу прокручивать низ всякий раз, когда я нажимаю кнопку. какой код добавить в кнопку onPress?
render() {
return (
<ScrollView>
{this.yourComponents()}
<Button>Scroll To Bottom </Button>
</ScrollView>
)
}
Вы можете сделать это, используя ref.
render() {
return (
<ScrollView ref={scrollView => this.scrollView = scrollView}>
{this.yourComponents()}
<Button onPress={() => {this.scrollView.scrollToEnd()}}>Scroll To Bottom </Button>
</ScrollView>
)
}
Вы также можете сделать это с помощью хука useRef.
const scrollView = useRef();
const scrollView = useRef();
const onPress = () => {
scrollView.current.scrollToEnd();
}
<Button onPress={onPress} />
Этот вопрос очень похож на этот один но это не совсем то же самое, поэтому я дам ответ.
ScrollView предоставляет метод ScrollTo(), который позволяет прокручивать в позицию x/y в вашем прокрутке.
let _scrollViewBottom
<ScrollView
ref='_scrollView'
onContentSizeChange={(contentWidth, contentHeight)=>{
_scrollViewBottom = contentHeight;
}}>
</ScrollView>
затем используйте имя ссылки представления прокрутки, например
this.refs._scrollView.scrollTo(_scrollViewBottom);
Кроме того, если вашей целью является частая отправка новых данных и прокрутка в конце прокрутки, вы можете взглянуть на react-native-invertible-scroll-view.
InvertibleScrollView — это представление прокрутки React Native, которое можно инвертировать, чтобы содержимое отображалось, начиная с нижней части, и пользователь должен прокручивать вниз, чтобы открыть больше. Это распространенный дизайн в чат-приложениях.
Для функциональной составляющей
<ScrollView
ref={ref => { scrollView = ref }}
onContentSizeChange={() => scrollView.scrollToEnd({ animated: true })}
>
...
</ScrollView>
Для компонента класса
<ScrollView
ref={ref => { this.scrollView = ref }}
onContentSizeCange={() => this.scrollView.scrollToEnd({ animated: true })}
>
...
</ScrollView>
let _scrollViewBottom
<ScrollView
ref={scrollViewRef}
onContentSizeChange={(contentWidth, contentHeight)=>{
_scrollViewBottom = contentHeight;
// this make move your scroll
scrollViewRef.current.scrollTo({x:0,y:_scrollViewBottom ,animated:true});
}}>
</ScrollView>
Кроме того, если вашей целью является частая отправка новых данных и прокрутка в конце прокрутки, вы можете взглянуть на react-native-invertible-scroll-view.
InvertibleScrollView — это представление прокрутки React Native, которое можно инвертировать, чтобы содержимое отображалось, начиная с нижней части, и пользователь должен прокручивать вниз, чтобы открыть больше. Это распространенный дизайн в чат-приложениях.
