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

Question

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

这是我的代码的一部分：

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>
      );
    }

然后在第一页我有一个按钮，当按下按钮时，我需要将第一页更改为第二页。我怎样才能做到这一点？

Answer 1

使用参考

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

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

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

Answer 2

我找到了解决方案，只需将其包含在 ViewPager 选项中：

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

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

this.viewpager.goToPage(NumberPage);