在 Android React Native 中隐藏 RefreshControl答案

【问题标题】：Hiding RefreshControl in Android React Native在 Android React Native 中隐藏 RefreshControl
【发布时间】：2017-05-08 10:53:16
【问题描述】：

我有一个要求，我想完全隐藏 Refresh Control for Android 的刷新指示器。我已经通过仍然看到灰色圆形指示器将大部分颜色属性设置为透明。有什么办法可以完全隐藏这个圆形指示器。链接到关于正在发生的事情的 gif：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

【问题讨论】：

标签： android reactjs react-native react-native-android

【解决方案1】：

你可以使用 react native 中的Platform api。

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
            )
          }
       />
     )
    })
  }
/>

【讨论】：

【解决方案2】：

您可以有条件地渲染 RefreshControl 组件，使其仅在您需要时渲染。

react 文档在这里讨论了一些技术：https://facebook.github.io/react/docs/conditional-rendering.html

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

【讨论】：

【解决方案3】：

我有同样的问题，想要同样的东西，但没有得到它的 android，所以我尝试了道具。 progressViewOffset={number}，直到下拉刷新工作以及加载图标被隐藏（在视图上方）。这不是正确的解决方案，但它对我有用。

【讨论】：

【解决方案4】：

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

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

【讨论】：

这不能回答问题。
嗯 ...我记得设置 refreshing={false} 阻止视图指示活动刷新。问题是隐藏刷新指示器。
问题是专门针对Android的，这显然是一个更难的问题。不过，我很感谢您花时间打字。