如何定制React Native ListView的RefreshControl的外观

Question

React Native的ListView有一个内置的pull-to-refresh控件叫做RefreshControl。它非常容易使用。

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

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

Answer 1

你可以通过执行以下操作来智胜它：

• 使用transparent absolute

将transparent属性设置为absolute component

示例：

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

当您拉动刷新时，您应该看到文本"Custom indicator to ...“

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

感谢this article的点子。

Answer 3

我是用react-native-pull-to-refresh-custom库做的

首先创建自定义加载器ListRefreshLoader

import React from 'react';
import {StyleSheet, View} from 'react-native';
import colors from '../../assets/colors';
import {wp} from '../../styles/responsiveScreen';
import Circuler from './Circuler';

const ListRefreshLoader = ({refreshing}) => {
  return (
    <View>
      {refreshing ? (
        <View style={styles.container}>
          <Circuler color={colors.gray} size={wp(6)} />
        </View>
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: wp(15),
    height: wp(15),
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ListRefreshLoader;

然后使用下面的方法

import PullToRefresh from 'react-native-pull-to-refresh-custom';
import ListRefreshLoader from '../../components/Loader/ListRefreshLoader';

 <PullToRefresh
        HeaderComponent={() => <ListRefreshLoader refreshing={refreshing} />}
        headerHeight={60}
        refreshTriggerHeight={60}
        refreshingHoldHeight={60}
        refreshing={refreshing}
        onRefresh={onRefresh}
        style={styles.list}>
        <FlatList
          data={friendsList}
          viewabilityConfig={{
            itemVisiblePercentThreshold: 90,
          }}
          maxToRenderPerBatch={100}
          removeClippedSubviews
          style={styles.list}
          keyExtractor={(item, index) => index.toString()}
          showsVerticalScrollIndicator={false}
          persistentScrollbar
          renderItem={renderItem}
          ItemSeparatorComponent={() => {
            return <View style={styles.listSeperator} />;
          }}
          ListEmptyComponent={totalUserFriends === 0 ? renderEmpty() : null}
          ListHeaderComponent={
            totalUserFriends !== 0 || searchText !== '' ? (
              <ListSearch
                placeHolder={`${t('Search')}...`}
                searchText={searchText}
                style={styles.searchStyle}
                fontName={'roboto-regular'}
                onSearchChange={(text) => setSearchText(text)}
                onClearSearch={() => {
                  setSearchText('');
                }}
                onEndEditing={() => setSearchText(searchText)}
              />
            ) : null
          }
        />
      </PullToRefresh>