如何在反应原生中使用列表视图获取选框效果？

Question

我试图在反应本机列表视图中获取选框效果.我正在尝试以这种方式实现.

<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();
}

Answer 1

我已经找到方法了。\n先安装 NPM react-timer-mixin 。并使用此代码。

\n\n

var moveListTimer = require('react-timer-mixin');\n\nconst\xc2\xa0ds\xc2\xa0=\xc2\xa0'';\nvar\xc2\xa0timerInterval\xc2\xa0=\xc2\xa010;\nvar\xc2\xa0moveListTimerId;\nvar\xc2\xa0pos\xc2\xa0=\xc2\xa00;\nvar\xc2\xa0ListArr\xc2\xa0=\xc2\xa0[];\n\n\n\nclass MarqueeListClass extends Component{\n\nconstructor(props){\n    super(props);\n    ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});\n    this.state = {\n        dataSource: ds.cloneWithRows(ListArr),\n        listLength:ListArr.length,\n        listmovingdirection:'right',\n    };\n}\n\n\ncomponentDidMount() {\n    moveListTimerId = moveListTimer.setInterval( () => { \n        this.moveList();\n    }, timerInterval);\n}\n\n\ncomponentWillUnmount() {\n  moveListTimerId && clearInterval(moveListTimerId);\n}\n\nmoveList(){\n    if(this.state.listmovingdirection==='right'){\n        this.moveListToRight();\n    }\n    else if(this.state.listmovingdirection ==='left'){\n        this.moveListToLeft();\n    }\n}\n\nmoveListToEnd(){\n    this.ListView.scrollToEnd({animated: true});\n}\n\nmoveListToRight(){\n    pos = pos + 0.5; \n    this.ListView.scrollTo({x: pos, y: 0, animated: true})\n}\n\nmoveListToLeft(){\n    if(pos>0){\n        pos = pos - 0.5;\n        this.ListView.scrollTo({x: pos, y: 0, animated: true})\n    }\n    else{\n        this.setState({listmovingdirection:'right'});\n    } \n}\n\nonListReachEnd(){\n    this.setState({listmovingdirection:'left'});\n}\n\nrender(){\n\n   return(\n    <View style = {styles.main}>\n                <ListView\n                    horizontal={true}\n                    ref={ref => this.ListView = ref}\n                    showsHorizontalScrollIndicator={false}\n                    automaticallyAdjustContentInsets={false}\n                    onEndReached={()=>this.onListReachEnd()}\n                    enableEmptySections={true}\n                    style={styles.list}\n                    dataSource={this.state.dataSource}\n                    renderRow={(rowData,sectionID,rowID) => < Row info={rowData} rowID = {rowID}/>} />  \n    </View>\n  );\n}\n}\n

\n