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

前端之家收集整理的这篇文章主要介绍了混合开发的大趋势之一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> <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

原文链接:https://www.f2er.com/react/306174.html

猜你在找的React相关文章