FlatList onRefresh 不适用于 SafeAreaView

Question

在 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 不调用。

Answer 1

我遇到了类似的情况（尽管我的 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}
    />
  }
/>
...

FlatList onRefresh 不适用于 SafeAreaView

FlatList onRefresh doesn't work with SafeAreaView

ios

react-native

react-native-flatlist

safeareaview

react-safeareaview