关于 listView和scrollView
scrollView 垂直方向 可适用于不同组件和布局的混合（元素不同） 能够渲染所有元素（即使元素被挤出屏幕） 但是适用于 较短的滚动列表
listView 垂直方向 元素结构接近（数据不同而已） 不是渲染所有的元素优先渲染屏幕上的可见元素 适用于较长列表的滚动
class ListViewBasicForm extends Component { //初始化模拟数据 constructor(props) { super(props); //设置数据源 rowHasChanged为了检测是否需要重新渲染当前行(更新row的策略， // 一般来说都是prevRowData和nextRowData不相等时更新row) const ds = new ListView.DataSource({rowHasChanged: (r1, r2)=>r1 != r2}); //state的初始设置 设置数据源 this.state={ dataSource :ds.cloneWithRows(['jhon','joy','tom','Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' ]) }; } render() { let display = this.state.showText ? this.props.text : ' '; return ( <View style={{padding:20}}> <ListView dataSource={this.state.dataSource} renderRow={(rowData)=><Text>{rowData}</Text>} /> </View> ); } }
listView的使用：
必须有两个属性是dataSource（数据源 ）和renderRow （解析的数据 以 设定好的格式进行渲染）
dataSource（数据源 ）讲解：
listView需要数据的来源 传入的数据必须是数组 或者是字典里面的嵌套数组
demo2 自定义显示字典里面的嵌套数组
class ListViewBasicForm extends Component { //初始化模拟数据 constructor(props) { super(props); //设置数据源 rowHasChanged为了检测是否需要重新渲染当前行(更新row的策略， // 一般来说都是prevRowData和nextRowData不相等时更新row) const ds = new ListView.DataSource({rowHasChanged: (r1, r2)=>r1 != r2}); //state的初始设置 设置数据源 this.state = { dataSource: ds.cloneWithRows(['row1', 'row 2', 'row 3', 'row 4', 'row5', 'row 6', 'row 7', 'row 8', 'row9', 'row 10', 'row 11', 'row 12', ]) }; this.isClick = -1; } /** * 设置每一行的解析数据 以及解析的格式 * @param rowData 每行的数据 * @param sectionID * @param rowID 第几行 * @returns {XML} * @private */ _renderRow(rowData:string, sectionID:number, rowID:number) { //模拟数据 var THUMB_UTLS = [ require('./img/a.jpg'), require('./img/b.jpg'), require('./img/c.jpg'), require('./img/favicon.png'), require('./img/a.jpg'), require('./img/b.jpg'), require('./img/c.jpg'), require('./img/favicon.png'), require('./img/a.jpg'), require('./img/b.jpg'), require('./img/c.jpg'), require('./img/favicon.png'), require('./img/a.jpg'), require('./img/b.jpg'), require('./img/c.jpg'), require('./img/favicon.png') ]; var imgSource = THUMB_UTLS[rowID]; return ( //可点击的组件 <TouchableOpacity> <View> <View style={styles.row}> <Image style={styles.thumb} source={imgSource}/> <Text style={{flex:1,fontSize:16,color:'blue'} } > {rowData + '我是测试行号哦~'} </Text> </View> </View> </TouchableOpacity> ); } render() { let display = this.state.showText ? this.props.text : ' '; return ( <ListView //设置两个重要的参数 // 数据源 dataSource={this.state.dataSource} //解析数据和填充格式 renderRow={this._renderRow} /> ); } }
结果：
