混合开发的大趋势之一React Native ScrollView (拉伸视图),ListV

转载请注明出处：王亟亟的大牛之路

最近都会有些碎片时间学习，所以文章会继续跟着更，因为东西还是比较连贯的，所以有兴趣的小伙们可以从头开始看，或者从专栏开始选，传送门：http://blog.csdn.net/column/details/ddwhan0123-rn.html

老规矩再安利下：https://github.com/ddwhan0123/Useful-Open-Source-Android

今天公司的网简直是卡的不能再卡了，外加周一综合症，整体干活没啥状态，不过该发的还得发，所以硬着头皮也得上了，不过真是卡的不行，忧伤。

---

ScrollView

在iOS/Android都有一样的实现，使得有限的屏幕里有着无限的拓展空间，同样的有2种模式,水平和垂直。

我们来看下官方竖直方向的例子：

import React,{ Component } from 'react'; import{ AppRegistry,ScrollView,Image,Text,View } from 'react-native' class IScrolledDownAndWhatHappenedNextShockedMe extends Component { render() { return( <ScrollView> <Text style={{fontSize:96}}>Scroll me plz</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>If you like</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>Scrolling down</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>What's the best</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>Framework around?</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:80}}>React Native</Text> </ScrollView> ); } } AppRegistry.registerComponent( 'IScrolledDownAndWhatHappenedNextShockedMe',() => IScrolledDownAndWhatHappenedNextShockedMe);

和我们的理解类似，他是一个可拉伸的师徒，当内容超过一屏幕时，通过操作滑动/方法调用无论多长，多大的内容都会被展现出来。

---

ListView

这是一个垂直的滚动的列表，每个Item 样式/结构类似，主要差异只是数据源的区别。

ListView和ScrollView有2个比较大的差异

ListView在创建之初并不立即渲染所有元素，而是优先渲染屏幕上可见的元素,ScrollView是全部渲染。

ListView内部的控件是有规律的，而ScrollView并没有（其实就是 有没有 item的概念）

ListView有2个必备的属性分别是 dataSource,renderRow

renderRow 对应UI组件

dataSource 对应数据源

我们来看下 官方提供的Sample

效果：

import React,{ Component } from 'react';
import { AppRegistry,ListView,View } from 'react-native';

class ListViewBasics extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'John','Joel','James','Jimmy','Jackson','Jillian','Julie','Devin' ]) }; } render() { return ( <View style={{paddingTop: 22}}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> </View> ); } } // App registration and rendering AppRegistry.registerComponent('ListViewBasics',() => ListViewBasics);

在构造函数中用 rowHasChanged回调监听item的变化
state初初始化数据源
每一行为一个,并进行赋值

ListView是一个比较重要的组件，这里再花更多的时间来介绍下，方便大家理解便于后期使用。

---

如何初始化，实例化一个基础的ListView?

需要以下几步：

创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组

使用数据源来实例化一个ListView组件

定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件作为每一行的Item

RN给与我们丰富的API让我们可以给 ListView添加 foot 和 header,包括一系列丰富的回调函数，诸如在到达列表尾部的时候调用回调函数(onEndReached)，还有在视野内可见的数据变化时调用回调函数(onChangeVisibleRows)，以及一些性能方面的优化。

还有诸如局部刷新的 rowHasChanged函数 以及渲染控制等等。

---

API属性/方法：

ScrollView props…

因为在RN中ListView继承于 ScrollView 所以ListView拥有ScrollView的所有属性。

dataSource ListViewDataSource

列表依赖的数据源

initialListSize number

在组件初始化的时候渲染多少行数据，有助于性能提升

onChangeVisibleRows function

(visibleRows,changedRows) => void

当可见的item的集合变化的时候调用此回调函数。

onEndReached function
当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用,初始化时如果没数据也会被调用。

onEndReachedThreshold number

调用onEndReached之前的临界值，单位是像素。

pageSize number

每次事件循环（每帧）渲染的行数。

更多内容可查看：https://facebook.github.io/react-native/docs/listview.html