반응식 네이티브 스 와이프 메서드 scrollBy

Question

인덱스 0을 클릭하면이 메서드가 작동하지 않습니다. 인덱스 0을 클릭하면 1과 2가 작동을 멈 춥니 다. 1 또는 2에서 2 번 클릭하면 슬라이더가 원하는 슬라이드로 이동합니다. 그러나 제로 인덱스는 전혀 작동하지 않습니다. 말해줘, 뭐가 문제 야?

<Swiper 
     onMomentumScrollEnd={(e, state, context) => this.setState({index: 
     state.index})} 
     ref={(swiper) => {this.swiper = swiper;}} 
     showsButtons={false} 
     width={500} 
     height={500} 
     showsPagination={false} 
     index={0} 
     loop={true} > 
     <View> 
      <Text>One</Text> 
     </View> 
     <View> 
      <Text>Two</Text> 
     </View> 
     <View> 
      <Text>Three</Text> 
     </View> 
    </Swiper> 
    <Text onPress={()=>{this.swiper.scrollBy(0, true)}}>One</Text> 
    <Text onPress={()=>{this.swiper.scrollBy(1, true)}}>Two</Text> 
    <Text onPress={()=>{this.swiper.scrollBy(2, true)}}>Three</Text> 

Answer 1

아래의 구현은 내가이 방법을 한 날

'use strict' 
import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

import Swiper from 'react-native-swiper'; 

var styles = StyleSheet.create({ 
    wrapper: { 
    }, 
    slide1: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#9DD6EB', 
    }, 
    slide2: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#97CAE5', 
    }, 
    slide3: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#92BBD9', 
    }, 
    text: { 
    color: '#fff', 
    fontSize: 30, 
    fontWeight: 'bold', 
    } 
}) 
export default class swiper extends Component{ 
    constructor (props) { 
    super(props) 
    this.swiperRef = swiper => this.swiper = swiper 
    this.scrollHandler = page => { 
     console.log ('Page ',page,this.swiper) 
     this.swiper && this.swiper.scrollBy(page, true) 
    } 
    } 
    render(){ 
    return (
     <Swiper 
     ref={ this.swiperRef } 
     showsButtons={false} 
     width={500} 
     height={500} 
     showsPagination={false} 
     index={0} 
     loop={true} > 
     <View style={ styles.slide1 }> 
      <Text style={ styles.text } onPress={()=>{console.log('Page 0'); this.swiper.scrollBy(1, true)}}>One</Text> 
     </View> 
     <View style={ styles.slide2 }> 
      <Text style={ styles.text } onPress={()=>{console.log('Page 1'); this.swiper.scrollBy(1, true)}}>Two</Text> 
     </View> 
     <View style={ styles.slide3 } > 
      <Text style={ styles.text } onPress={()=>{console.log('Page 2');this.swiper.scrollBy(2, true)}}>Three</Text> 
     </View> 
    </Swiper> 
    ) 
    } 
} 


AppRegistry.registerComponent('myproject',() => swiper); 

Answer 2

작동 :

onClickScroll(index){ 
let currentIndex = this.state.index; 

if(currentIndex !== index) { 
    let resultSlide = undefined; 
    let countSlides = this.state.itineraryDaysListItem.length; 

    if(index > currentIndex && index !== countSlides) 
    { 
     resultSlide = index - currentIndex; 
     this.swiper.scrollBy(resultSlide, true); 
    } 
    else if(index>currentIndex && index === countSlides) 
    { 
     resultSlide = currentIndex+1; 
     this.swiper.scrollBy(resultSlide, true); 
    } 
    else if(index < currentIndex && index !== 0){ 
     resultSlide = (currentIndex - index) * (-1); 
     this.swiper.scrollBy(resultSlide, true); 
    } 
    else if(index < currentIndex && index === 0){ 
     resultSlide = currentIndex * (-1); 
     this.swiper.scrollBy(resultSlide, true); 

    } 
} 

} (현재 지수를 기준으로) 지정된 인덱스에 의해