我试图在反应本机列表视图中获取选框效果.我正在尝试以这种方式实现.
<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>
);
}
}
