React Native RefreshControl控件在IO

情景再现

在使用ListView控件时，都会加上RefreshControl控件，一般代码如下：

<ListView
renderSectionHeader={this._renderSectionHeader.bind(this)}
    refreshControl={
        <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh.bind(this)}
            />
    }
    onEndReached={() => this._onEndReached()}
    dataSource={this.state.dsHomeViewList}
    renderHeader={this._renderHeader.bind(this)}
    renderRow={this._renderHomeList.bind(this)}
    renderFooter={this._renderFooter.bind(this)} />

如果已进入页面时，未做任何数据请求，即使将refreshing的值设成false，RefreshControl也会显示在页面的右上角。如下图所示：

解决方法

作为处女座的我，一直对这个控件根根于怀，显示在那，太影响美观了。我刚开始用的一个解决方法是，在那个位置放一个别的控件，把它的位置占掉，这样它就不显示了，但是感觉不太完美。后来 google发现了一个更好，更简单的解决方法：

<RefreshControl
refreshing={ this.state.isRefreshing }
onRefresh={() => this._onRefresh()}
style={{
backgroundColor : 'transparent',
}}
tintColor="#ccc"
title="Loading..."
titleColor="#5a6d7d"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffff00"
/>

其实只是多了一个样式，backgroundColor : 'transparent',就可以完美解决，也不影响正常使用。顿时心中顺畅很多。

这个bug已经存在很长时间了，经历了很多个版本了，一直都未修复。希望以后可以修复吧。

参考链接

传送门

微信公众号：ReactNative开发圈