0

拉动刷新会导致无尽的微调器，并且在 iPhone 上测试应用程序时不会调用 onRefresh。在带有主页按钮的 Android 和 iOS 设备上，一切都按预期工作。

ReactNative 版本：0.58.3

当 flex:1 从容器样式中删除时，一切正常，但它破坏了屏幕的降价。使用 ScrollView 会导致同样的问题。

render() {
  return (
  <View style={styles.container}>
    <SafeAreaView style={styles.safeAreaView}>
      <Toolbar
        leftElement="menu"
        centerElement="sometext"
        style={{ container: { backgroundColor: '#ffa500' } }}
        searchable={{
          autoFocus: true,
          placeholder: 'Search',
          onChangeText: text => this.searchFilterFunction(text),
          onSearchCloseRequested: () => this.resetSearchFilter()
        }}
        onLeftElementPress={() => this.props.navigation.openDrawer()}
      />
    </SafeAreaView>

      <FlatList 
          data={this.state.data}
          keyExtractor={this.keyExtractor}
          ItemSeparatorComponent={this.renderSeparator}
          contentContainerStyle={{paddingLeft: '3%', paddingBottom: '4%'}}
          refreshing={this.state.refreshing}
          onRefresh={this.getData}
          renderItem={({item}) => 
            <PartnerCardComponent 
              partnerName={item.name} 
              discount={item.discount}
              url={item.url}
              image={item.image}
              phone={item.telephones}
              address={item.locations}
              description={item.description}
              navigation={this.props.navigation}
            />
          }
      />
      <SafeAreaView style={styles.bottomArea}/>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  safeAreaView: {
    backgroundColor: '#ffa500',
    shadowColor: 'gray',
    shadowOffset: {height: 1, width: 0},
    shadowOpacity: 0.5,
  },
  bottomArea: {
    backgroundColor: 'white',
    shadowColor: 'white',
    shadowOffset: {height: -5, width: 0},
    shadowOpacity: 5,
  }
});

预期：更新 FlatList 数据

接收：无休止的微调器旋转，onRefresh 不调用。

4

1 回答 1

4

我也遇到过类似的情况（尽管我的 FlatList在 SafeAreaView内，而不是被它们包围）。在我看来，对我有用的是使用模糊描述的 RefreshControl 组件，而不是直接设置 onRefresh 和刷新道具。在没有看到您的其余代码（并从 react-native 导入 RefreshControl）的情况下，我刚刚将其放入：

...
<FlatList
  data={this.state.data}
  keyExtractor={this.keyExtractor}
  ItemSeparatorComponent={this.renderSeparator}
  contentContainerStyle={{paddingLeft: '3%', paddingBottom: '4%'}}

      refreshControl={<RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this.getData}
      />}

  renderItem={({item}) =>
    <PartnerCardComponent 
      partnerName={item.name} 
      discount={item.discount}
      url={item.url}
      image={item.image}
      phone={item.telephones}
      address={item.locations}
      description={item.description}
      navigation={this.props.navigation}
    />
  }
/>
...
于 2019-05-08T15:08:22.173 回答