react-native – 如何自定义React Native ListView的RefreshCont

发布时间：2020-12-15 20:54:47 所属栏目：百科来源：网络整理

导读：React Native的ListView有一个名为 RefreshControl的内置pull-to-refresh控件.它非常易于使用. 我想自定义控件的外观和感觉,以使用不同的视觉设计,例如使用材料设计进度指示器. 如何在React Native中自定义RefreshControl的外观？你可以通过这样做来超越它

React Native的ListView有一个名为 RefreshControl的内置pull-to-refresh控件.它非常易于使用.

我想自定义控件的外观和感觉,以使用不同的视觉设计,例如使用材料设计进度指示器.

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

你可以通过这样做来超越它：

>为ListView设置透明属性
>添加具有绝对位置的组件

例：

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

这是结果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!