2017-11-09 15 views
0

私は、反応ネイティブステップインジケータで私のアプリでViewPagerを使用していますが、特定のボタンを使用してページを変更する必要があります。ここで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> 
    ); 
    } 

は、その後、最初のページに私がボタンを持っていると私はボタンが押されたときに、第2のページへ最初のページを変更する必要があります。どうやってやるの?

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

をしてから、このようなページ上のボタンのたonPressに設定:

this.viewpager.goToPage(NumberPage); 

答えて

0

は、私はちょうどViewPagerオプションでこれを含める必要があり、解決策を見つけました
ref={(viewPager) => {this.viewPager = viewPager}} 

後でイベントリスナー

と統合できます
onPress={()=>this.viewPager.setPage([the index])} 
0

使用参照

関連する問題