react-native-swiper scrollBy()

Question

我会先说我对本机反应很陌生。我正在创建一个使用 react-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() 方法导航到正确的屏幕。

Answer 1

你已经设置了你要引用的值，所以你只需要执行相应的滚动函数即可。

方法

scrollBy(index, animated)

按相对索引滚动。

Link to module

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