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>
这是结果：
