React Native之ListView使用

前言

• 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

ListView组件介绍

---

• ListView组件是React Native中一个比较核心的组件，用途非常广，设计初衷就是用来高效的展示垂直滚动的列表数据
• ListView 继承了 ScrollView 的所有属性
• 使用步骤：
  • 创建一个ListView.DataSource数据源，然后给它传递一个普通的数组数据
    
    
    

  getInitialState(){ // 初始化数据源(rowHasChanged是优化的一种手段，只有当r1 !== r2的时候才会重新渲染) var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return{ // 给dataSource传递一组 数组 dataSource: ds.cloneWithRows(['内容0', '内容1', '内容2', '内容3', '内容4', '内容5'])
          }
      },

  • 使用数据源实例化一个ListView组件，定义一个renderRow回调函数，这个函数会接受数组中的每个数据作为参数，并返回一个可渲染的组件（也就是该列表的每一行Item）
    
    
    

  render() { return (
              <View style={styles.container}> // 根据数据源实例化一个ListView <ListView style={{backgroundColor:'yellow'}} // 获取数据源 dataSource={this.state.dataSource} 
          
  		
  
          		
  网友评论
       		
  				
  
  			
  			
  			
  		
  		
  		
      	
      	
          	
  
          		
  更多精彩分享
          		
  
          			
          		
          			
  	        		
  	        		学习是年轻人改变自己的最好方式