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 }1819 // 这里省略了没有修改的代码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: '新商品描述' + index12 }));13 this.setState({isRefreshing: false, dataSource: ds.clone
WithRows(products)});14 }, 2000);15 }16 }
再次下拉拖曳刷新列表，等待时间间隔2秒后，商品列表也更新了，如图3.25所示。
图3.25 拖曳刷新列表
