React native 如何定制React Native ListView的外观'；刷新控制

React Native的ListView有一个内置的pull to refresh控件，名为。它非常容易使用

我想自定义控件的外观，以使用不同的视觉设计，例如使用材质设计进度指示器

---

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

您完全可以这样做。不过，这需要一些工作。 你可以从写这样的东西开始

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

PTR动画
客户指标在这里。。。
{rowData}}
ref='PTRListView'
/>

当您拉刷新时，您应该看到文本“Custom indicator goes here…”

按照此模式，可以放置组件，而不仅仅是视图和文本

---

对于学分，感谢您的创意。

您可以通过以下方式智取：

• 将

  透明属性设置为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>

{/*自定义刷新控件*/}
{/*列表视图*/}
{
this.setState（{刷新：true}）；
设置超时（（）=>{
这个。_addRows（）
}, 2000);
}}
/>
}
renderRow={（rowData）=>{rowData}}/>

结果是：

---

我刚刚应用了这个解决方案，效果很好。经过大量研究，我没有找到比这个更好的解决方案。这个解决方案非常适合ios，但似乎不适合Android。默认指示器和自定义指示器都会显示。您可以使用手势处理程序中的scrollview和reanimated创建自己的scrollview。在本视频中，william使用reanimated创建了一个完整的自定义scrollview。我制作了一个组件，允许您使用任何乐透动画作为标题，但不确定这是否是您要查找的，但您可以在这里查看：