3.5 拖曳刷新列表——RefreshControl组件
在3.4节中，我们完善了商品列表的功能：不仅优化了列表的布局，还添加了分割线等效果。不过，该App还缺少一个常用的功能，那就是拖曳刷新。虽然也可以添加一个“刷新”按钮用于响应用户请求，但是用户体验却没有拖曳好，而且，由于现在移动开发设备屏幕通常较小，额外添加按钮对界面设计影响也较大。
?小知识：用户体验（User Experience，简称UX或UE）是涉及一个人使用一个特定产品或系统或服务的有关行为、态度与情绪。用户体验包括实际、体验、情感、有意义、有价值的人机交流，以及产品所有权方面的问题。此外还包括系统方面，例如实用、易用性和效率。
为了实现拖曳刷新列表的效果，需要使用一个新的React Native组件：RefreshControl。RefreshControl组件用在ScrollView或ListView内部，为其添加下拉刷新的功能。
在使用RefreshControl组件之前，首先要在this.state中添加一个是否正在刷新中的标志。
（1）修改app.js代码如下：
01 export default class app extends Component {
02 constructor(props) {
03 super(props);
04 this.state = {
05 isRefreshing: false // 是否正在刷新中的标志
06 };
07 }
08
09 // 这里省略了没有修改的代码
10 }
（2）在ListView组件中添加RefreshControl。修改ListView相关代码如下：
01 export default class app extends Component {
02 // 这里省略了没有修改的代码
03
04 render() {
05 // 这里省略了没有修改的代码
06
06 return (
07
08 // 这里省略了没有修改的代码
09
10
11 renderRow={this._renderRow}
12 renderSeparator={this._renderSeperator}
13 refreshControl={this._renderRefreshControl()}/>
14
15
16 );
17 }
18
19 // 这里省略了没有修改的代码
20 _renderRefreshControl() {
21 return (
22
23 refreshing={this.state.isRefreshing} // 通过this.state.
isRefreshing设置RefreshControl是否正在刷新
24 tintColor={'#FF0000'}
25 title={'正在刷新数据，请稍后...'}
26 titleColor={'#0000FF'}>
27
28 );
29 }
30 }
重新记载应用后，下拉拖曳列表，可以看到添加的RefreshControl效果如图3.23所示。
图3.23 添加RefreshControl的商品列表
（3）接着，需要为RefreshControl添加状态变化的逻辑，修改app.js代码如下：
01 export default class app extends Component {
02 // 这里省略了没有修改的代码
03
04 _renderRefreshControl() {
05 return (
06
07 refreshing={this.state.isRefreshing}
08 onRefresh={this._onRefresh} // 刷新时调用的onRefresh()方法
09 tintColor={'#FF0000'}
10 title={'正在刷新数据，请稍后...'}
11 titleColor={'#0000FF'}>
12
13 );
14 }
15
16 _onRefresh = () => {
17 this.setState({isRefreshing: true}); // 设置状态为正在刷新
18
19 setTimeout(() => {
20 this.setState({isRefreshing: false}); // 设置状态为结束刷新
21 }, 2000); // 定时器时间间隔2秒
22 }
23 }
这时重新下拉拖曳列表然后松开，列表就处于刷新状态了。等待时间间隔2秒钟后，列表又会恢复初始状态。
另外，需要提醒读者的是，与StatusBar组件类似，RefreshControl在不同平台下的效果也是不完全相同的，例如，上述实现在Android设备上的运行效果如图3.24所示。
图3.24 RefreshControl在Android上的效果
（4）在完成拖曳刷新的响应之后，还可以进一步完善：不仅只是等待2秒钟，还可以更新商品数据并刷新列表。修改app.js代码如下：
01 export default class app extends Component {
02 // 这里省略了没有修改的代码
03
04 _onRefresh = () => {
05 this.setState({isRefreshing: true});
06
07 setTimeout(() => {
08 const products = Array.from(new Array(10)).map((value,
index) => ({
09 image: require('./images/product-image-01.jpg'),
10 title: '新商品' + index,
11 subTitle: '新商品描述' + index
12 }));
13 this.setState({isRefreshing: false, dataSource: ds.clone
WithRows(products)});
14 }, 2000);
15 }
16 }
再次下拉拖曳刷新列表，等待时间间隔2秒后，商品列表也更新了，如图3.25所示。
图3.25 拖曳刷新列表