我试图在反应本机列表视图中获取选框效果.我正在尝试以这种方式实现.
<ListView horizontal={true} ref={ref => this.infoListView = ref} showsHorizontalScrollIndicator={false} automaticallyAdjustContentInsets={false} onContentSizeChange={(contentWidth,contentHeight)=>{ this.moveListToEnd() }} onEndReached={()=>this.moveListToTop()} enableEmptySections={true} style={styles.infolist} dataSource={this.state.dataSource} renderRow={(rowData,sectionID,rowID) => < Row data={rowData} rowID = {rowID}/>} /> moveListToEnd(){ this.infoListView.scrollToEnd({animated: true}); } moveListToTop(){ this.infoListView.scrollTo({x: 0,y: 0,animated: true}) this.moveListToEnd(); }
解决方法
我找到了做到这一点的方法.
首先安装NPM react-timer-mixin.并使用此代码.
首先安装NPM react-timer-mixin.并使用此代码.
var moveListTimer = require('react-timer-mixin'); constds=''; vartimerInterval=10; varmoveListTimerId; varpos=0; varListArr=[]; class MarqueeListClass extends Component{ constructor(props){ super(props); ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(ListArr),listLength:ListArr.length,listmovingdirection:'right',}; } componentDidMount() { moveListTimerId = moveListTimer.setInterval( () => { this.moveList(); },timerInterval); } componentWillUnmount() { moveListTimerId && clearInterval(moveListTimerId); } moveList(){ if(this.state.listmovingdirection==='right'){ this.moveListToRight(); } else if(this.state.listmovingdirection ==='left'){ this.moveListToLeft(); } } moveListToEnd(){ this.ListView.scrollToEnd({animated: true}); } moveListToRight(){ pos = pos + 0.5; this.ListView.scrollTo({x: pos,animated: true}) } moveListToLeft(){ if(pos>0){ pos = pos - 0.5; this.ListView.scrollTo({x: pos,animated: true}) } else{ this.setState({listmovingdirection:'right'}); } } onListReachEnd(){ this.setState({listmovingdirection:'left'}); } render(){ return( <View style = {styles.main}> <ListView horizontal={true} ref={ref => this.ListView = ref} showsHorizontalScrollIndicator={false} automaticallyAdjustContentInsets={false} onEndReached={()=>this.onListReachEnd()} enableEmptySections={true} style={styles.list} dataSource={this.state.dataSource} renderRow={(rowData,rowID) => < Row info={rowData} rowID = {rowID}/>} /> </View> ); } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。