在Android React Native中隐藏RefreshControl
在Android React Native中隐藏RefreshControl
提问于 2017-05-08 18:53:17
我有一个要求，我想完全隐藏刷新控制的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回答 4
Stack Overflow用户
发布于 2019-12-25 01:29:29
您可以在原生react中使用Platform接口。
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
)
}
/>
)
})
}
/>Stack Overflow用户
发布于 2017-05-08 23:58:51
您可以有条件地呈现RefreshControl组件，以便它只在您需要的时候呈现。
react文档在这里讨论了一些技术：https://facebook.github.io/react/docs/conditional-rendering.html
但为了简单起见，我更喜欢使用https://github.com/ajwhite/render-if npm模块来根据组件状态或redux存储中的标志有条件地呈现组件。
Stack Overflow用户
发布于 2020-02-26 16:05:59
我有同样的问题，想要同样的东西，但没有在android上得到，所以我尝试了道具。编号{progressViewOffset=}，直到拉取刷新以及加载图标被隐藏(在视图上方)。这不是一个合适的解决方案，但它对我很有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43845789
复制相关文章
相似问题
腾讯云开发者
