Question

我有一个要求，我想完全隐藏刷新指示器的Android控件。我已经将大多数颜色属性设置为透明，仍然看到灰色圆形指示。有没有办法完全隐藏这个循环指标。链接到gif关于什么是hapenning：http://imgur.com/dkAmkC6

这是我的代码：

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  FlatList,
  Dimensions,
  RefreshControl,
  ToastAndroid,
} from 'react-native';


import Constants from './Constants';



export default class TestList extends Component {

  constructor(props) {
    super(props);
    this.rows =[{id: 1},{id: 2},{id: 3},{id: 4}];
    this.state = {
      refreshing: false,
    }
  }


  renderItem(row) {
    return (
      <Text style={{fontSize: 20, borderBottomWidth: 1, borderColor: 'red', color: 'blue', height:80}}>{row.item.id}</Text>
      )
    }
  render() {
    return (
      <View style={[styles.container]}>
        <FlatList
          data={this.rows}
          renderItem={this.renderItem.bind(this)}
          overScrollMode='always'
          style={{flex: 1}}
          keyExtractor={(item) => item.id}
          removeClippedSubviews={false}
          keyboardShouldPersistTaps='always'
          refreshControl={
            <RefreshControl
              colors={['transparent']}
              style={{backgroundColor: 'transparent'}}
              progressBackgroundColor='transparent'
              refreshing={this.state.refreshing}
              onRefresh={() =>
              ToastAndroid.show('Refresh completed with short duration', ToastAndroid.SHORT)}/>}
          ref="FlatList"/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})


  [1]: http://imgur.com/dkAmkC6

Answer 1

您可以有条件地呈现RefreshControl组件，以便它只在您需要时呈现。

反应文档讨论了一些技巧：https://facebook.github.io/react/docs/conditional-rendering.html

但是为了简单起见，我更喜欢使用https://github.com/ajwhite/render-if npm模块根据组件状态或redux存储中的标志有条件地呈现组件。

Answer 2

您可以使用来自本机的import { Platform } from 'react-native' <Flatlist ...other props refreshControl={ Platform.select({ ios: ( <RefreshControl colors={['transparent']} style={{backgroundColor: 'transparent'}} progressBackgroundColor='transparent' refreshing={this.state.refreshing} onRefresh={() => ToastAndroid.show( 'Refresh completed with short duration', ToastAndroid.SHORT ) } /> ) }) } /> API。

Destroy(gamobject)

Answer 3

我遇到了同样的问题，想要同样的东西，但没有在android上得到，所以我尝试了道具。 progressViewOffset = {number}，最高可以进行刷新的拉动以及隐藏的加载图标（位于视图上方）。这不是适当的解决方案，但对我有用。

Answer 4

这适用于iOS（尚未在Android上测试）：

refreshControl={
  <RefreshControl
      refreshing={false}
      onRefresh={this.onRefreshHandler.bind(this)}
      title='Pull to refresh'
      tintColor='transparent'
   />
}

在Android React Native中隐藏RefreshControl

4 个答案: