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

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

最近都会有些碎片时间学习，所以文章会继续跟着更，因为东西还是比较连贯的，所以有兴趣的小伙们可以从头开始看，或者从专栏开始选，传送门：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@H_404_24@>@H_404_24@ <Text@H_404_24@ style@H_404_24@=@H_404_24@@H_404_24@{{fontSize@H_404_24@:96}}@H_404_24@>@H_404_24@Scroll me plz</Text@H_404_24@>@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Text@H_404_24@ style@H_404_24@=@H_404_24@@H_404_24@{{fontSize@H_404_24@:96}}@H_404_24@>@H_404_24@If you like</Text@H_404_24@>@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Text@H_404_24@ style@H_404_24@=@H_404_24@@H_404_24@{{fontSize@H_404_24@:96}}@H_404_24@>@H_404_24@Scrolling down</Text@H_404_24@>@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Text@H_404_24@ style@H_404_24@=@H_404_24@@H_404_24@{{fontSize@H_404_24@:96}}@H_404_24@>@H_404_24@What's the best</Text@H_404_24@>@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Text@H_404_24@ style@H_404_24@=@H_404_24@@H_404_24@{{fontSize@H_404_24@:96}}@H_404_24@>@H_404_24@Framework around?</Text@H_404_24@>@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Image@H_404_24@ source@H_404_24@={require('.@H_404_24@/img@H_404_24@/favicon.png@H_404_24@')} />@H_404_24@ <Text@H_404_24@ style@H_404_24@=@H_404_24@@H_404_24@{{fontSize@H_404_24@:80}}@H_404_24@>@H_404_24@React Native</Text@H_404_24@>@H_404_24@ </ScrollView@H_404_24@>@H_404_24@ ); } } AppRegistry.registerComponent( 'IScrolledDownAndWhatHappenedNextShockedMe',() => IScrolledDownAndWhatHappenedNextShockedMe);@H_404_24@

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

ListView

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

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

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

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

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

renderRow 对应UI组件

dataSource 对应数据源

我们来看下官方提供的Sample

效果：

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

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

在构造函数中用 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

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

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

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

ScrollView

ListView

猜你在找的React相关文章

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