ReactNative学习笔记（二）——长列表（FlatList和SectionList）

       昨天跟着ReactNative中文网学习，看到了ListView和网络还有Navigation跳转的那里，发现这三个知识点有些难度，没有理解，今天接着看的。但是发现了一个问题，原来昨天看的文档版本有点落后，看了当前版本的文章，才慢慢理解了一点。如图所示：      在ReactNative中文网的左上角，标明了文档的版本，点击右边的箭头可以选择以前的版本。昨天不知道什么时候选择了0.41版本，有些文章有些落后了，比如0.41介绍的是ListView，0.51版本里则替换成了FlatList和SectionList。大家在学习的时候也注意一下。总结一下今天学习的内容：

     一，FlatList

     FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。 

      数据源一般是一个对象数组。展示的时候，就把需要的对象的属性展示出来。再说一下renderItem，这里贴一下文档里的代码：renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}。从代码里可以看到，文档里的例子，FlatList的每个子条目都是一个<Text>组件。在以后的项目中，肯定都是自定义一个组件，声明一些属性，从数据源中取出对象的属性然后赋值给组件的属性。今天我试着实现了一个子条目包含两个<Text>组件的FlatList，还是有一些成就感的。

    二，SectionList

    SectionList在显示效果上和FlatList很像，只是它的列表可以分为一段一段的，每一段可以设置一个标题。大家把文档里的代码复制到自己的项目，看下效果就明白了。 SectionList组件必须的属性有三个：sections，renderItem，renderSectionHeader。sections是数据源，renderItem用来渲染子条目，renderSectionHeader用来渲染标题。

      看着文档的例子来学习就可以，没有什么难度，把属性名记清楚就可以了。我今天用记事本默写代码的时候，三个属性名，两个都写错了，sections忘记加s了，renderSectionHeader写成了renderSectionHead。

        用FlatList和SectionList在运行成功后，页面的最下方会有一个黄色的提示，大概说需要一个key，这里我还没有搞懂。

    三，用Fetch实现网络数据请求

       昨天看了几篇关于RN网络请求的文章，都看的云里雾里的，博主们都推荐先看一下Promise，但是根本看不懂。今天不管三七二十一，别纠结那些原理，能先成功的请求网络，拿到数据，展示出来就可以了。所以我直接看了Marno关于RN学习路线里，关于Fetch的小例子，把他的Demo代码下载下来，添加到自己的项目里，运行一下，看下效果，然后研究一下，自己学会用Fetch请求网络数据就可以了，原理以后再明白就可以。

       具体的内容，我自己专门写了一篇博客，来介绍Fetch，只是一些简单的用法，需要的可以去看下ReactNative用Fetch实现网络请求，这里不多赘述了。

      今天主要就是看了这些，自己敲了几个小例子，明天看看Navigation跳转。