[英]react-native-swiper method scrollBy
如果您單擊索引 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>
我做了這個方法:
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);
}
}
}
以下實現對我有用
'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);
對於在 2019 年閱讀本文並使用函數組件/鈎子編寫的任何人。
import React, { useRef } from 'react'
import Swiper from 'react-native-swiper'
const YourCoolComponent = () => {
const swiper = useRef(null)
return (
<Swiper ref={swiper}>
<View>
<Text>Page 1</Text>
<Button onPress={() => swiper.current.scrollBy(1)}>Forward</Button>
</View>
<View>
<Text>Page 2</Text>
<Button onPress={() => swiper.current.scrollBy(-1)}>Backward</Button>
</View>
</Swiper>
)
}
這對我有用。
export default class Navigator extends Component {
constructor(props) {
super(props);
this.onPressActiveButton = this.onPressActiveButton.bind(this);
this.state = {
idxActive: 0
}
}
getIdxActive = () => {
return this.state.idxActive
}
onPressActiveButton = (index) => {
this.refs._swiper.scrollBy(index - this.state.idxActive, true);
}
onIndexChanged(index){
this.setState({
idxActive: index
});
}
render() {
return (
<View style={styles.container}>
<Toolbar
buttons={tabButtons}
color={getColor('#0A5F22')}
getIndex={this.getIdxActive}
onPressActiveButton={this.onPressActiveButton} />
<Swiper
ref="_swiper"
loop={true}
showsPagination={false}
onIndexChanged={this.onIndexChanged.bind(this)}>
<SmartAlarm />
<ClockView />
<TimerView />
<StopWatchView />
</Swiper>
</View>
)
}
}
如果您的屏幕在單獨的組件中
你可以使用 useRef 和 forwardRef
父級刷卡器
import React, {useState , useRef , forwardRef} from 'react';
import Swiper from 'react-native-swiper';
import ScreenOne from "./screens/ScreenOne";
import ScreenTow from "./screens/ScreenTow";
const Parent = (props) => {
const swiper = useRef(null);
return (
<Swiper ref={swiper}>
<ScreenOne ref={swiper} />
<ScreenTow ref={swiper}/>
</Swiper>
);}
export default Parent;
ScreenOne 組件
import React, {forwardRef} from 'react';
const ScreenOneComponent = (props , ref) => {
return (
<View>
<Button title ='move to screen 1' onPress={() => ref.current.scrollBy(1)}/>
</View>
);}
const ScreenOne = forwardRef(ScreenOneComponent);
export default ScreenOne;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.