React Native填坑之旅--ListView篇

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

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

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

最简单的

//@flow

import 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
到底啦