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

最新推荐文章于 2023-03-26 17:12:37 发布

雪zi

最新推荐文章于 2023-03-26 17:12:37 发布

阅读量946

点赞数

分类专栏： react-native 文章标签： react-native listview

本文链接：https://blog.csdn.net/LemonGirls/article/details/51264585

版权

react-native 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

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

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

代码见分晓吧。

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

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

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

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

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

①自定义一个类的写法：

<pre class="javascript" name="code">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()</span>{ return( <ListView style={styles.sub_item} dataSource = {this.state.dataSource} renderRow = {this._renderRow.bind(this)} /> ) }<div>//系统renderRow会提供以下的参数 _renderRow(rowData: string, sectionID: number, rowID: number){ var imageSrc = IMAGES[rowID%IMAGES.length]; return( <TouchableOpacity onPress = {this._pressRow.bind(this,rowID)}> <View style={styles.item}></div><div></div><div> <Image style={styles.pic} source={imageSrc}/></div><div></div><div> <View style={styles.sub_item}> <View > <Text style = {styles.text}>ListView</Text> </View> <View> <Text style = {styles.text}> {rowData}+{sectionID}+{rowID}</Text> </View> </View> </View> </TouchableOpacity> ) }</div><div></div><div> _genRows(): Array<string> { var dataBlob = []; for (var ii = 0; ii < 100; ii++) {</div><div></div><div> dataBlob.push('Row ' + ii ); } return dataBlob; } _pressRow(x){ console.log('click'+x); }}</div><div></div><div>const styles = StyleSheet.create({ item:{ flex:1, flexDirection:'row', height:100, borderWidth:1, borderRadius:5, marginBottom:10, justifyContent: 'center', alignItems: 'center',</div><div></div><div> },</div><div></div><div> pic:{ flex:1, borderRadius:20, resizeMode: Image.resizeMode.contain</div><div></div><div> }, sub_item:{ flex:1,</div><div></div><div> }, text:{ textAlign: 'center',</div><div></div><div> }</div><div></div><div>});</div>

</pre><pre class="javascript" name="code">

上面的代码中，首先我们注意到export default 这个呢是表明这个类可以被外部引用，export关键字在安卓也出现过吧，意思其实差不多的。然后接下来看到构造方法，并不陌生吧，与java不同的是，JS不支持函数的重载。构造方法默认的书写就是带props参数，理解的话这个props可以理解成java当中的构造方法的参数，但严格的说起来，props和state都是用于描述component状态的，就是说不管你用或不用，它都在那里，从java的观点来看这两个属性，我第一个问题都是他们是什么类型的吧，经过我的严密观察，从严谨的角度来讲，他们是对象类型的，可以随便添加属性，就是你用到什么，你就可以给他添加什么属性。是不是很随意。那我又有问题了，反正都是可以添加属性的，用一个就够了，为啥又有两个，然后我又严密观察了一下，其中有setState方法，顾名思义，但是这个方法的特殊就在于会触发render方法，就是重绘视图。那样的话区别就有了吧，一般props存放一些不变的属性，state存放一些属性值改变会导致视图重绘的属性。

render()这个方法就是绘制视图，返回的视图就是要显示在界面的视图啦。

ListView的基本用法的话我就简单介绍一下。我们先看一下重要代码

  <ListView style={styles.sub_item}
        dataSource = {this.state.dataSource}
        renderRow = {this._renderRow.bind(this)}
      />

</pre></p><p></p><p>    ListView最简单的用法就是这样啦，dataSource是所有数据，renderRow是Item的视图。还有其他的可以看<a target=_blank href="http://react-native.cn/" target="_blank">官网API</a>。有一点需要强调的是，数据的话，需要进行简单处理一下，</p><pre class="javascript" name="code">  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,可以触摸的，就是可以点击的咯，给谁设置点击事件就用他们之一来包裹谁。这里就是视图的部分了，我们看一下我这里的布局，

  <TouchableOpacity  onPress = {this._pressRow.bind(this,rowID)}>
        <View style={styles.item}>

            <Image style={styles.pic} source={imageSrc}/>

            <View style={styles.sub_item}>
               <View >
                   <Text style = {styles.text}>ListView</Text>
               </View>
               <View>
                   <Text  style = {styles.text}> {rowData}+{sectionID}+{rowID}</Text>
               </View>
            </View>
        </View>
      </TouchableOpacity>

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

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