如何在 ViewPager react-native 中更改页面答案

【问题标题】：How to change page in ViewPager react-native如何在 ViewPager react-native 中更改页面
【发布时间】：2017-11-09 04:57:39
【问题描述】：

我在我的应用中使用带有 react-native-step-indicator 的 ViewPager，但我需要在使用特定按钮时更改页面。

这是我的代码的一部分：

import ViewPager from 'react-native-viewpager';
import StepIndicator from 'react-native-step-indicator';

const PAGES = ['Business','Logo','Description'];

export default class UserSetup extends Component {
  constructor() {
    super();
    var dataSource = new ViewPager.DataSource({
      pageHasChanged: (p1, p2) => p1 !== p2,
    });
    this.state = {
      dataSource: dataSource.cloneWithPages(PAGES),
      currentPage:0,
      token: null,
      userId: null,
      name: "",
      address1: "",
      address2: "",
      city: "",
      country: "",
      zipcode: "",
      url: "",
      phone: "",
      description: "",
    }
  }
  render() {
    const { navigate } = this.props.navigation;
      return (...
        <View style={styles.stepIndicator}>
          <StepIndicator customStyles={indicatorStyles}
          currentPosition={this.state.currentPage}
          stepCount={3}
          labels={['Basic info','Logo','Description']} />
        </View>
        <ViewPager dataSource={this.state.dataSource}
          renderPage={this.renderViewPagerPage}
          onChangePage={(page) => {this.setState({currentPage:page})}}
          />
      </View>
      );
    }

然后在第一页我有一个按钮，当按下按钮时我需要将第一页更改为第二页。我该怎么做？

【问题讨论】：

标签： javascript react-native android-viewpager

【解决方案1】：

使用参考

ref={(viewPager) => {this.viewPager = viewPager}}

稍后您可以将其与事件侦听器集成

onPress={()=>this.viewPager.setPage(index)}

【讨论】：

【解决方案2】：

补充@LorisTujiba 的答案。当我尝试通过单击按钮更改页面时，此代码对我有用。

1. ref的声明部分

const ref = React.useRef(PagerView);

2。传递参考

3。点击按钮更改页面

ref.current.setPage(currentIndex + 1);

【讨论】：

这个答案节省了我的时间，但我收到错误找不到变量：currentPosition.so 我已将 currentPosition 替换为 0、1、2 等索引

【解决方案3】：

我找到了解决方案，只需将其包含在 ViewPager Options 中即可：

ref={(viewpager) => {this.viewpager = viewpager}}

然后在页面上的按钮 OnPress 中设置如下：

this.viewpager.goToPage(NumberPage);

【讨论】：