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

Question

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

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

如何在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>

这是结果:

Answer 2

你完全可以做到这一点。但这需要一些工作。你可以从写这样的东西开始。

<View style={styles.scrollview}>
  <View style={styles.topBar}><Text style={styles.navText}>PTR Animation</Text></View>
  <View style={styles.fillParent}>
    <Text>Customer indicator goes here...</Text>
  </View>
  <View style={styles.fillParent}>
    <ListView
      style={{flex: 1}}
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <View style={styles.row}><Text style={styles.text}>{rowData}</Text></View>}
      ref='PTRListView'
    />
  </View>
</View>

当您拉动刷新时，您应该会看到文本“自定义指示器位于此处...”

遵循此模式，您可以放置​​组件而不仅仅是视图和文本。

对于学分，感谢这篇文章的想法。