我遇到了一个问题,我的刷新指示器甚至不显示状态,这在我的构造函数中是真的,但它在按钮单击时显示。
下面是我的代码
class ProductList extends Component {
constructor(props){
super(props);
this.state = {
productList: null,
refreshing: true,
}
}
async componentWillMount() {
}
async _handleRefresh() {
console.log('test');
this.setState({ refreshing: false });
};
render() {
return (
<View style={{ flex: 1, backgroundColor:'#EFEFF4' }}>
<View style={{ flexDirection:'row',backgroundColor:'#fff',borderBottomWidth:0.5,borderBottomColor:'#cbd2d9' }}>
<Text style={{ padding:10, fontFamily:'open-sans-regular' }}>{this.state.searchText}</Text>
<TouchableOpacity style={{ marginLeft:'auto',padding:10 }}
onPress={() => this.setState({ refreshing: true }) }>
<Text style={{ color:'#6391c0', fontFamily:'open-sans-regular' }}>Search</Text>
</TouchableOpacity>
</View>
<FlatList
data={this.state. productList}
renderItem={(item) => <CustomList navigation={this.props.navigation} data={item} />}
keyExtractor={(item, index) => index}
={this.state.refreshing}
onRefresh={() => this._handleRefresh()}
ListEmptyComponent={() =>
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Text style={{ marginTop: 150 }}>No records found, try search again!</Text>
</View>
}
/>
</View>
);
}
}
export default ProductList;
此组件将用于下面的React-Native-Tab-View组件
import React, { Component } from 'react';
import { View , Text, StyleSheet, Dimensions } from 'react-native';
import MyProductList from '../profile/myProductList';
import { TabViewAnimated, TabBar } from 'react-native-tab-view';
class MyProduct extends Component {
static navigationOptions = ({ navigation }) => ({
headerTitle : 'My Product'
});
constructor(props){
super(props);
this.state = {
index: 0,
routes: [
{ key: 'upComing', title: 'Up coming' },
{ key: 'completed', title: 'Completed' },
],
};
}
_handleIndexChange = index => this.setState({ index });
_renderHeader = props => (
<TabBar
indicatorStyle={{ backgroundColor:'#0079BF'}}
style={{ backgroundColor:'#FFFFFF' }}
tabStyle={{ padding:5 }}
labelStyle={{ color:'black',fontWeight:'bold', fontSize:15, fontFamily:'open-sans-bold' }}
getLabelText={({ route }) => route.title}
{...props} />
);
_renderLabel = ({ route }) => (
<Text>{route.title}</Text>
);
_renderScene = ({ route, focused }) => {
switch (route.key) {
case 'upComing': {
return < ProductList focused={focused} navigation={this.props.navigation} />;
}
case 'completed':
return < ProductList focused={focused} navigation={this.props.navigation} type={1} />;
default:
return null;
}
};
render() {
return (
<TabViewAnimated
navigationState={this.state}
renderScene={this._renderScene}
renderHeader={this._renderHeader}
onIndexChange={this._handleIndexChange}
animationEnabled={false}
swipeEnabled={false}
/>
);
}
}
export default MyProduct;
即使我在ProductList中将刷新状态设置为true,刷新指示器也不会显示。但是如果我手动从按钮单击触发,它会显示。
任何帮助都很感激。
5条答案
按热度按时间clj7thdc1#
可能不起作用,因为您没有实现刷新属性。
在平面列表中呈现加载指示符的另一种方法是使用ListFooterComponent,如下所示:
and _renderFooter是一个逻辑简单的方法
在本例中,我使用的是redux,所以基本上我有3种不同的状态(请求、成功和失败)...当我触发“请求”时,这个.props.isLoading为真,当“成功”或“失败”时,我将这个.props.isLoading更改为假。
顺便说一句,这是使用React本机v0.53.0
e5nqia272#
我回答这个问题是为了以后的访客。
在我的情况下,刷新指示器在开始时没有显示,因为 Package
FlatList
的FlatList
和View
没有flex: 1
,所以没有内容的列表及其 Package 器没有高度。决议如下:
aemubtdh3#
现在有了Animated.FlatList加载器刷新和onRefresh工作。
ev7lccsx4#
对于未来的用户,灵活的东西也不工作...我“欺骗”它使用空状态。
不是很理想,但是很有效。除了当实际上没有数据时,用户需要刷新,然后你会有2个指示器。也许用另一个布尔值来跟踪它?这对我来说不是一个大问题。
pw9qyyiw5#
当你用scrollview Package 平面列表时,刷新也不会显示出来,一旦你删除scrollview,它就会工作得很好。