反応するネイティブスワイパーメソッド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); 

    } 
} 

}（現在のインデックスに対して）指定されたインデックスで