react-native - 如何自定义React Native ListView RefreshControl的外观

Question

React Native的ListView有一个内置的名为RefreshControl的下拉刷新控件。 super 好用。

我想自定义控件的外观，以使用其他视觉设计，例如使用 Material 设计进度指示器。

如何在React Native中自定义RefreshControl的外观？

Answer 1

您可以通过执行以下操作来使其智能化:

将transparent属性设置为ListView

添加位置为absolute的组件

例:

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

结果如下: