在Android React Native中隱藏RefreshControl

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模塊有條件地呈現基於標記在組件的狀態或終極版商店的組件。

Answer 2

這對我的作品在iOS（沒有在Android上進行測試）：

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