React Native填坑之旅--ListView篇

列表显示数据,基本什么应用都是必须。笔者写作的时候RN版本是0 34。今天就来从浅到深的看看React Native的ListView怎么使用。 首先是使

列表显示数据,基本什么应用都是必须。笔者写作的时候RN版本是0.34。今天就来从浅到深的看看React Native的ListView怎么使用。

首先是使用写死的数据,之后会使用网络请求的数据在界面中显示。最后加上一个ActivityIndicator,网络请求的过程中显示Loading图标,加载完成之后显示数据,隐藏Loading图标。

最简单的

//@flowimport React from 'react';import { Text, View, ListView} from 'react-native';export default class DemoList extends React.Component { constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['row 1', 'row 2']) }; } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> ); }}

引入所需要的内置组件之类的就不多说了。

第一步,在 constructor里设置数据源,并同时指定什么时候重新绘制一行,就是在这个时候 (r1, r2) => r1 !== r2}重绘。

之后,在state里面设置数据源。下面从网络请求数据的时候state的作用就更加明显了。RN的组件在state发生改变的时候就会重绘。这个下面会详细解释。

最后,在 render方法里返回ListView,这里的props里有一个 renderRow。在这里指定的代码就是把数据源中每一行的数据绘制在 Text里。

一步一步接近实际产品开发

下面就把绘制行的部分抽象出来。在Native应用的开发中,无论是iOS还是Android,行绘制的部分都是单独出来的。在RN里虽然可以不独立出来,但是你也看到了,这样的写法遇到稍微复杂一点的行内容的时候就捉襟见肘了。不独立出来行绘制部分代码会很难维护。

这部分不复杂,独立出来以后是这样的:

import //...略...export default class DemoList extends React.Component { constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['row 1', 'row 2']) }; //bind this._renderRow = this._renderRow.bind(this); } _renderRow(rowData) { return ( <View style={{height: 50}}> <Text>{rowData}</Text> </View> ); } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} /> ); }}

这个例子和上例基本上一样。只是多了一个 _renderRow(rowData)方法。

注意:在使用这个方法以前,一定要绑定: this._renderRow = this._renderRow.bind(this);。绑定也可以这样 <ListView dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)} />

在绘制行的时候,比之前稍微有一点改动。行文本的外面套了一个View,并指定这个View的高度为50。

加上装饰

从现在来看,数据只有两行。如果不滑动一下的话,看起来和两个上下排列的Text没有什么区别。

首先我们加一个分割线:

export default class DemoList extends React.Component { constructor() { //记得使用方法之前绑定 this._renderSeparator = this._renderSeparator.bind(this); } _renderRow(rowData) { // ...略... } _renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool) { return ( <View key={`{sectionID}-${rowID}`} style={{height: 1, backgroundColor: 'black'}}> </View> ); } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} renderSeparator={this._renderSeparator} /> ); }}

这里需要额外说明一些,在方法里 _renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool)我看看到了在参数的名称后面都有类型的说明。这个不是ES6的也不是js里的,而是FB自己搞的一套静态类型检查工具里的定义。这个工具叫 Flow

如果你从一开始就没打算跟flow扯上任何关系,那么就按照ES标准写就好。

至于分割线也是非常简单。我们这就返回了一个高度一个像素的,背景色为黑色的view。

点击和高亮

Row的点击不想Native那样,默认的一般就有了。在RN里,我们需要手动赋予一行可以被点击的功能。

_renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) { return ( <TouchableHighlight onPress={() => { this._pressRow(rowID); highlightRow(sectionID, rowID); }}> <View style={styles.row}> <Text style={styles.text}>{rowData}</Text> </View> </TouchableHighlight> ); }

在RN里处理一般点击的不二选择就是 TouchableHighlight。在 TouchableHighlight里的 onPress里调用自定义的_pressRow方法处理点击, highlightRow方法高亮行。

当然,这里就少不了用到样式了:

const styles = StyleSheet.create({ row: { flexDirection: 'row', justifyContent: 'center', padding: 10, backgroundColor: '#F6F6F6', }, text: { flex: 1, }, seperator: { height: 1, backgroundColor: '#CCCCCC' }});

把Cell分离

在实际的开发中,一般没有人会把Row(或者行)的绘制和 ListView放在一起。我们这里就演示如何把Row的绘制分离出去。

首先创建一个单独的文件,定义Cell:

import React from 'react';import { View, Text, TouchableHighlight, StyleSheet} from 'react-native';export default class DemoCell extends React.Component { render() { return ( <View> <TouchableHighlight onPress={this.props.onSelect}> <View style={styles.row}> <Text style={styles.text}>{this.props.rowData}</Text> </View> </TouchableHighlight> </View> ); }};const styles = StyleSheet.create({ row: { flexDirection: 'row', justifyContent: 'center', padding: 10, backgroundColor: '#F6F6F6', }, text: { flex: 1, },});

Row也是一个组件,是一个组件就可以在另外的组建里渲染。所以,单独定义的Row就是这么用的。

回到 demoList.js文件。在 _renderRow方法中修改代码:

_renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) { return ( // <TouchableHighlight onPress={() => { // this._pressRow(rowID); // highlightRow(sectionID, rowID); // }}> // <View style={styles.row}> // <Text style={styles.text}>{rowData}</Text> // </View> // </TouchableHighlight> <DemoCell onSelect={() => { this._pressRow(rowID); highlightRow(sectionID, rowID); }} rowData={rowData}/> ); }

结合网络请求

ListView在实战中,除非是Settings之类的界面,数据都是从网络请求得到的。上一节中正好已经讲述了如何使用RN内置的fetch请求网络数据。这一节中就是用fetch来请求dribbble的数据。

在使用dribbble的数据之前你需要注册,获得Access Token。这是请求认证所必须的。

export default class DemoList extends React.Component { constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { isLoading: false, isLoadingTail: false, dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), filter: this.props.filter, queryNumber: 0, }; //...略... } //...略... _getShots(query: string) { this.setState({ isLoading: true, queryNumber: this.state.queryNumber + 1, isLoadingTail: false, }); api.getShotsByType(query, 1).then((responseData) => { this.setState({ isLoading: false, dataSource: this._getDataSource(responseData), }); }).catch((error) => { this.LOADING[query] = false; this.resultsCache.dataForQuery[query] = undefined; this.setState({ dataSource: this._getDataSource([]), isLoading: false, }); }); }

还是在类 DemoList里,其他无关紧要的代码先略去。要紧的地方是需要注意在 constructor里设置state的时候 dataSource如何设置的。

state的改变会影响到组件的绘制。所以,在 _getShots方法里,开始请求之前先设置一个默认的state状态。在请求成功之后使用 setState设置一个,在catch到异常的时候再显示另外一个。

state里还有一个属性叫做 isLoading: false,。这个是影控制Loading视图的。在false的时候隐藏,在true的时候显示。

那么loading界面是什么样呢?

<View style={{alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'white'}}> <ActivityIndicator animating={true} style={[styles.centering]} size="large" color="#cccccc" /></View>

组合起来

在类 DemoList里组合相关代码:

_renderView() { if (this.state.isLoading) { return ( <UNActivityIndicator loadingType={LOADING_TYPE.Large} /> ); } return ( <View style={styles.container}> <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} renderSeparator={this._renderSeparator} automaticallyAdjustContentInsets={false} /> </View> ); }

在renderView的时候,先检查 state.isLoading,如果需要loading视图,那么返回loading视图,其他的不返回。数据加载成功之后 state.isLoading被设置为false,那么显示ListView。

填坑完毕

以上就是处理ListView和其中的Cell的一些常见问题的方法。

未登录用户
全部评论0
到底啦