React Native Scrollview: прокрутите вверх при нажатии кнопки - PullRequest
Новая
       6

React Native Scrollview: прокрутите вверх при нажатии кнопки

0 голосов
/ 10 марта 2020

Итак, у меня есть компонент с ScrollView, который содержит много элементов, поэтому вам нужно прокрутить длинный путь вниз.

Теперь в нижней части страницы должна быть кнопка, которая при нажатии будет прокручивать страницу вверх.

Я уже создал кнопку как FAB (кнопка с плавающим действием) в дополнительный компонент.

Он интегрирован в родительский компонент, где расположен ScrollView.

Я обнаружил, что вам нужно создать ref в компоненте ScrollView и реализовать кнопка прямо там, которая использует это ref, чтобы сделать работу прокрутки. Упрощенно, вот что у меня есть: 

imports ...
const ParentComponent: React.FC<Props> = () => {

  const scroll = React.createRef();

  return (
    <View>
      <ScrollView ref={scroll}>
        <SearchResult></SearchResult> // creates a very long list 
        <FloatingButton
          onPress={() => scroll.current.scrollTo(0)}></FloatingButton>
      </ScrollView>
    </View>
  );
};

export default ParentComponent;

Как видите, есть компонент FloatingButton с методом onPress().

Вот реализация: 

import React, {useState} from 'react';
import {Container, Content, Button, Icon, Fab} from 'native-base';

const FloatingButton: React.FC<Props> = () => {

  return (
    <Fab
      position="bottomRight"
      onPress={(???}>
      <Icon name="arrow-round-up" />
    </Fab>
  );
};

export default FloatingButton;

Теперь проблема: где мне делать метод onPress()? Потому что, если я оставлю его в родительском компоненте, он не будет работать, потому что он не находится непосредственно в Fab (в FloatingButton). Я хотел бы сделать onPress() logi c в Fab, но если я сделаю это, ScrollView, который ему нужен, не будет доступен, потому что он находится в родительском компоненте. Моя идея состояла в том, чтобы, возможно, передать ref как prop в FloatingButton, но по какой-то причине это не сработало.

Может кто-нибудь помочь мне?

Ответы [ 3 ]

1 голос
/ 10 марта 2020

Вы можете либо позволить родительскому хуку в функцию FloatingButton onPress, либо передать ref непосредственно в FloatingButton. 

export const Parent : FC<ParentProps> = props => {
    const scrollRef = useRef<ScrollView>();

    const onFabPress = () => {
        scrollRef.current?.scrollTo({
            y : 0,
            animated : true
        });
    }

    return (
        <View>
            <ScrollView ref={scrollRef}>
                {/* Your content here */}
            </ScrollView>
            <FloatingButton onPress={onFabPress} />
        </View>  
    );
}

export const FloatingButton : FC<FloatingButtonProps> = props => {
    const { onPress } = props;

    const onFabPress = () => {
        // Do whatever logic you need to
        // ...

        onPress();
    }

    return (
        <Fab position="bottomRight" onPress={onFabPress}>
            <Icon name="arrow-round-up" />
        </Fab>
    );
}
1 голос
/ 10 марта 2020

Вы должны определить горизонтальное или вертикальное значение, к которому хотите прокрутиться, как этот фрагмент кода. 

onPress={()=> 
   this.scroll.current.scrollTo({ x:0, y:0 });
}
1 голос
/ 10 марта 2020

Пожалуйста, посмотрите мой код закуски. Надеюсь, это поможет вам. 

https://snack.expo.io/@anurodhs2/restless-edamame
...