реакция-родной-swiper scrollBy () - PullRequest
Новая
       7

реакция-родной-swiper scrollBy ()

0 голосов
/ 28 июня 2019

Я предвосхищу это, сказав, что я новичок в реакции на нативную. Я создаю приложение, которое использует Reaction-native-Swiper для пролистывания трех экранов. Функциональность смахивания работает, однако я хотел бы включить две кнопки на каждой странице, которые позволяют пользователю переходить на другие два экрана (из документации это возможно с помощью scrollBy ()).

Я прочитал, что для доступа к методу должна быть создана ссылка на swiper, но я не уверен, как получить к нему доступ из каждого компонента экрана или как передать эту ссылку вниз. Опять же, я очень новичок, чтобы реагировать на родной язык и пытаюсь понять, как это работает.

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

Родительский класс: 

export default class MainView extends React.Component {
  render() {
    return (
      <Swiper 
        showsPagination={false} 
        loop={false}
        index={1}
        ref={(swiper) => {this._swiper = swiper;}}
        >

        <Jar />

        <Home />

        <Awesome />

      </Swiper>
    );
  }
}

Одна из кнопок, используемых внутри компонентов: 

export default class JarButton extends React.Component {
    render() {
        return(
            <TouchableHighlight onPress={ () => {}}>
              <Image style={styles.img} source={jarPic} resizeMode="center"/> 
            </TouchableHighlight>
        )
    }
}

Я предполагаю, что все, что мне нужно сделать, это передать ссылку вниз на компонент, а затем на кнопку, чтобы позволить onPress () перейти к нужному экрану с помощью метода scrollBy ().

1 Ответ

0 голосов
/ 28 июня 2019

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

Методы 

scrollBy(index, animated)

Прокруткапо относительному индексу.

Ссылка на модуль 

   <TouchableHighlight onPress={ () => this.swiper.scrollBy(1)}>
          <Image style={styles.img} source={jarPic} resizeMode="center"/> 
        </TouchableHighlight>
...