如何自定义 React Native ListView 的 RefreshControl 的外观/感觉 [英] How to customize look/feel of React Native ListView's RefreshControl

问题描述

React Native 的 ListView 有一个内置的下拉刷新控件，名为

React Native's ListView has a built-in pull-to-refresh control called RefreshControl. It's super easy to use.

I'd like to customize the look and feel of the control to use a different visual design, such as using a material design progress indicator.

How can I customize the look of the RefreshControl in React Native?

解决方案

You can outsmart it by doing:

• setting transparent properties to ListView
• Adding component with absolute position

Example:

<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>

This is the result:

这篇关于如何自定义 React Native ListView 的 RefreshControl 的外观/感觉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！