繁体   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