React Native的ListView有一个名为
RefreshControl的内置pull-to-refresh控件.它非常易于使用.
我想自定义控件的外观和感觉,以使用不同的视觉设计,例如使用材料设计进度指示器.
如何在React Native中自定义RefreshControl的外观？
你可以通过这样做来超越它：
例：
<View style={{height:Dimensions.get('window').height}}>
{/* custom refresh control */}
<View
style={{position:'absolute',width:Dimensions.get('window').width,height:60,alignItems:'center',justifyContent:'center'}}>
<Progress.CircleSnail
color={['red','green','blue']}
duration={700} />
</View>
{/* list view*/}
<ListView
dataSource={this.state.dataSource}
refreshControl={
<RefreshControl
onLayout={e => console.log(e.nativeEvent)}
// all properties must be transparent
tintColor="transparent"
colors={['transparent']}
style={{backgroundColor: 'transparent'}}
refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({refreshing:true});
setTimeout(() => {
this._addRows()
},2000);
}}
/>
}
renderRow={(rowData) => <Text>{rowData}</Text>} />
</View>
这是结果：
