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>

react-native-swiper scrollBy（）

1 个答案: