簡體   English   中英

使用下一個先前的按鈕來響應本機無限滾動視圖

[英]React native infinite scrollview with next previous buttons

我想創建一個像react-native-infinte-scrollview這樣的Infinite ScrollView,在其中滾動創建和刪除視圖,但是此插件不提供下一個/上一個按鈕。 我只想添加下一個和上一個按鈕,因為我的項目中有10個gif文件,每個gif大小為7到10 MB,如果我同時在scrollview中加載所有這些gif文件,則我的應用程序崩潰了。

我對此一無所知,但我這里有邏輯

constructor(){
  this.state = {
    pageNUmber:0,
    data:['url1','url2',url3]
  }
}

renderGif(){
  var data = this.state.data;
  return(
    <Image source={{uri:data[this.state.pageNUmber]}} ?>
  )
}

changePage(val){
  if(val=='next'){
    this.setState({
      pageNumber:this.state.pageNumber+1
    })
  }else{
    if(this.state.pageNumber!=0)
      this.setState({
        pageNumber:this.state.pageNumber-1
      })
  }

}


render(){
  return(
  <View>
    <ScrollView>
      {this.renderGif()}
    </ScrollView>
    <TouchableOpacity onPress={()=>{this.changePage('next')}}>
      <Text>next</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={()=>{this.changePage('previous')}}>
      <Text>previous</Text>
    </TouchableOpacity>
  </View>
  )
}

我非常確定,React Native的ScrollViewFlatList之間的區別在於,flatlist會刪除頁面中的內容。 根據文檔 ,您需要使用啟用了水平的Flatlist

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM