想要在本机反应中自动滚动平面列表 [英] wants to autoscroll flatlist in react native

问题描述

我正在尝试自动滚动我的平面列表，但是当我运行我的代码时，我无法自动滚动，如果我想手动滚动它每 5 秒后索引 0 ..这是我的平面列表及其引用函数的所有代码

I am trying to auto scroll my flatlist but when I run my code I cannot scroll auto and if I want to manual scroll it comes to index 0 after every 5 seconds .. here is my all code of flat list and its refs function

在构造函数中

this.flatList1=null;

在 componentwillMount 中

And in componentwillMount

componentWillMount(){

  setInterval(()=>{
    if(this.flatList1!==null){
      this.flatList1.scrollToOffset({ offset: 1 })
    }
  }, 5000);
}

<FlatList horizontal
  data={this.state.getallvideos}
  ref={flatList1 => { this.flatList1 = flatList1 }}
  renderItem={({item}) =>  

    <TouchableOpacity onPress={this.playvideoinnetpage.bind(this,item.vd_link,item.vd_thumbnail,item.vd_id,item.vd_title)}>

      <Card
        containerStyle={{
          padding:0, 
          width:180,
          height:112,
          backgroundColor:'#000',
          borderColor:'#000',
          marginTop:10,
          marginLeft: 5,
          marginRight:5,
          marginBottom:5
        }}
        image={{uri:item.vd_thumbnail}}
        imageStyle={'stretch'}
      >

        <View style={{position:'relative',bottom:75,}}> 
          <Text numberOfLines={1} style={{color:'#fff',fontWeight:'bold',fontSize:14}}> {item.vd_title}</Text>
        </View>
      </Card>
    </TouchableOpacity>
  }
/>

推荐答案

你可以在这里阅读答案 [ 如何使列表 (FlatList) 使用动画自动滚动元素? ]

You can read the answer here [ How do I make a list (FlatList) automatically scroll through the elements using Animated? ]

scrollToIndex = (index, animated) => {
   this.listRef && this.listRef.scrollToIndex({ index, animated })
 }

 componentDidMount() {  // use componentDidMount instead since the WillMount is getting deprecated soon
   setInterval(function() {
     const { sliderIndex, maxSlider } = this.state
     let nextIndex = 0

     if (sliderIndex < maxSlider) {
       nextIndex = sliderIndex + 1
     }

     this.scrollToIndex(nextIndex, true)
     this.setState({sliderIndex: nextIndex})
   }.bind(this), 3000)
 }

您基本上应该增加索引，而不是像上面的代码那样每 5000 毫秒将其设置为 1.保持 currentIndex、maxIndex 并在像上面一样增加 currentIndex 后使用 scrollToIndex 函数.请确保在使用 setInterval

You should essentially increment the index instead of setting it to 1 every 5000ms like in above code. Keep the currentIndex, maxIndex and use the scrollToIndex function after incrementing currentIndex like above. Do make sure you are modifying the state after updating the currentIndex using setInterval

这篇关于想要在本机反应中自动滚动平面列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！