javascript - 如何更改 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)}