react-native入门之ListView-安卓开发者的第一视角

     我想我要写一篇长长的博客来总结一下这几天的学习。毕竟之前做安卓的都是用java，第一次接触js，还是发现有点困难。

     首先，讲一下我自己对RN这个总结的理解吧（是相对于安卓），安卓的话，想必都知道Activty是mvc模式，那么RN是怎么 渲染视图的呢，我是不是都剧透了，把渲染这个词都说出来了。      -  -。。。  好吧。RN的话 ，我自己的理解是采用 CSS样式，然后渲染视图。具体的我们接下来会有介绍。

     然后，吐槽一下js吧，js比起java感觉 好随意，但我真的不是随意的人啊，所以用起来真的好难！！      - -。。

     好吧，无论如何，有图有真相。

   

     代码见分晓吧。

     我借用的ListView的Demo是官方的示例， 官网API

     然后经过我的画蛇添足 =。=    源码地址

     那么，下面就正式开始了，====================================================》

    =========================================================================》

    我们自己定义封装一个ListView（MyListView）

   ①自定义一个类的写法：

    

export default class MyListView extends Component{
  //构造方法，可以等同于es5的getInitialState方法
  constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows()),

    }
  }
 
  
 render(){    return(          )   }
//系统renderRow会提供以下的参数  _renderRow(rowData: string, sectionID: number, rowID: number){    var imageSrc = IMAGES[rowID%IMAGES.length];    return(              
            
                                              ListView                                                  {rowData}+{sectionID}+{rowID}                                             )  }
  _genRows(): Array {    var dataBlob = [];    for (var ii = 0; ii < 100; ii++) {
      dataBlob.push('Row ' + ii );    }    return dataBlob;  }  _pressRow(x){    console.log('click'+x);  }}
const styles = StyleSheet.create({  item:{    flex:1,    flexDirection:'row',    height:100,    borderWidth:1,    borderRadius:5,    marginBottom:10,    justifyContent: 'center',    alignItems: 'center',
  },
  pic:{  flex:1,    borderRadius:20,  resizeMode: Image.resizeMode.contain
  },  sub_item:{    flex:1,
  },  text:{    textAlign: 'center',
  }
});
 
  
 
  
 
  
    上面的代码中，首先我们注意到export default 这个呢是表明这个类可以被外部引用，export关键字在安卓也出现过吧，意思其实差不多的。然后接下来看到构造方法，并不陌生吧，与java不同的是，JS不支持函数的重载。构造方法默认的书写就是带props参数，理解的话这个props可以理解成java当中的构造方法的参数，但严格的说起来，props和state都是用于描述component状态的，就是说不管你用或不用，它都在那里，从java的观点来看这两个属性，我第一个问题都是他们是什么类型的吧，经过我的严密观察，从严谨的角度来讲，他们是对象类型的，可以随便添加属性，就是你用到什么，你就可以给他添加什么属性。是不是很随意。那我又有问题了，反正都是可以添加属性的，用一个就够了，为啥又有两个，然后我又严密观察了一下，其中有setState方法，顾名思义，但是这个方法的特殊就在于会触发render方法，就是重绘视图。那样的话区别就有了吧，一般props存放一些不变的属性，state存放一些属性值改变会导致视图重绘的属性。
 
  
   render()这个方法就是绘制视图，返回的视图就是要显示在界面的视图啦。
 
  
   ListView的基本用法的话我就简单介绍一下。我们先看一下重要代码
 
  
 
 
   
  
 
  
  
 
  
    ListView最简单的用法就是这样啦，dataSource是所有数据，renderRow是Item的视图。还有其他的可以看官网API。有一点需要强调的是，数据的话，需要进行简单处理一下，
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows())}
 
  
    这里数据片段，第一句话的意思大概是这样的意思，r1 和 r2 是不同时刻的Item，相等则不变，不相等则变成r2,这样的意义在于在数据发生变化重新渲染视图时只改变有所变化的Item这一行，其他的不变。然后第三句话就是把第一句话这种格式赋给真正的数据。我这里_genRows()这个方法返回的是100个数组，就是伪造100个数据吧。
 
  
    然后基本上就实现了我们的ListView了，我猜想作为安卓开发者，这个时候一定是要问那每个Item的点击事件怎么设置呢。好，既然这位同学你发出了这样的问题，那么我就简单说明一下。
 
  
     RN中有几种点击控件，，Touchable,可以触摸的，就是可以点击的咯，给谁设置点击事件就用他们之一来包裹谁。这里就是视图的部分了，我们看一下我这里的布局，
 
  
  
 
  
  
        

            

            
               
                   ListView
               
               
                    {rowData}+{sectionID}+{rowID}
               
            
        
      
 
  
 
  
   
 
  
     以上是Item的布局，最外层是TouchableOpacity,至于为什么我选这个还不选其他的，任性。。。。。  有兴趣的可以研究一下每一个的区别。  然后onPress就是设置点击事件了。至于样式什么的，就省略了。
 
  

 
  
     好了，就到此结束了。毕竟刚学两天，好多地方说的不对的明示一下我，免得我一直被自己误导。