React原生:FlatList刷新在第一次加载期间为true时不显示

x8goxv8g  于 2022-12-30  发布在  React
关注(0)|答案(5)|浏览(218)

我遇到了一个问题,我的刷新指示器甚至不显示状态,这在我的构造函数中是真的,但它在按钮单击时显示。
下面是我的代码

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,刷新指示器也不会显示。但是如果我手动从按钮单击触发,它会显示。
任何帮助都很感激。

clj7thdc

clj7thdc1#

可能不起作用,因为您没有实现刷新属性。

<FlatList
    data={ this.props.productList }
    refreshing={ this.props.isLoading }
    onRefresh={ this._onHandleRefresh }
    renderItem={ ({item}) => this._renderListViewRow(item) }
    keyExtractor={ item => item.id } />

在平面列表中呈现加载指示符的另一种方法是使用ListFooterComponent,如下所示:

<FlatList
    data={ this.props.productList }
    refreshing={ false }
    onRefresh={ this._onHandleRefresh }
    ListFooterComponent={ this._renderFooter }
    renderItem={ ({item}) => this._renderListViewRow(item) }
    keyExtractor={ item => item.id } />

and _renderFooter是一个逻辑简单的方法

_renderFooter() {
    if (!this.props.isLoading) return null;

    return (
        <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingVertical: 10 }}>
            <ActivityIndicator animating size="small" />
        </View>
    );
}

在本例中,我使用的是redux,所以基本上我有3种不同的状态(请求、成功和失败)...当我触发“请求”时,这个.props.isLoading为真,当“成功”或“失败”时,我将这个.props.isLoading更改为假。
顺便说一句,这是使用React本机v0.53.0

e5nqia27

e5nqia272#

我回答这个问题是为了以后的访客。
在我的情况下,刷新指示器在开始时没有显示,因为 Package FlatListFlatListView没有flex: 1,所以没有内容的列表及其 Package 器没有高度。

<View style={styles.container}>
  <FlatList
    data={content}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({item}) => (
      <PostsItem {...item} uri={uri} entrypoint={entrypoint} />
    )}
    onRefresh={() => setPostsPage(1)}
    refreshing={loading}
    onEndReached={fetchMorePosts}
    onEndReachedThreshold={0.1}
  />
</View>

决议如下:

<View style={[styles.container, {flex: 1}]}>
  <FlatList
    style={{flex: 1}}
    data={content}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({item}) => (
      <PostsItem {...item} uri={uri} entrypoint={entrypoint} />
    )}
    onRefresh={() => setPostsPage(1)}
    refreshing={loading}
    onEndReached={fetchMorePosts}
    onEndReachedThreshold={0.1}
  />
</View>
aemubtdh

aemubtdh3#

现在有了Animated.FlatList加载器刷新和onRefresh工作。

<Animated.FlatList
    data={items}
    keyExtractor={(item) => item._id}
    renderItem={({ item }) => (
      <Item item={item} />
    )}
    onRefresh={Auth.events}
    refreshing={loading.events}
  />
ev7lccsx

ev7lccsx4#

对于未来的用户,灵活的东西也不工作...我“欺骗”它使用空状态。

<FlatList
      data={addresses}
      onRefresh={loadData}
      ListEmptyComponent={() => {
        if(isLoading) {
          return(
            <ActivityIndicator size={'large'} />
          );
        }
        return(
          <Center flex={1}>
            <Text>no addresses</Text>
          </Center>
        );
      }}
      refreshing={isLoading}
      renderItem={renderAddress}
    />

不是很理想,但是很有效。除了当实际上没有数据时,用户需要刷新,然后你会有2个指示器。也许用另一个布尔值来跟踪它?这对我来说不是一个大问题。

pw9qyyiw

pw9qyyiw5#

当你用scrollview Package 平面列表时,刷新也不会显示出来,一旦你删除scrollview,它就会工作得很好。

相关问题