FlatList onRefresh не работает с SafeAreaView - PullRequest
Новая
       48

FlatList onRefresh не работает с SafeAreaView

0 голосов
/ 15 апреля 2019

Pull для обновления вызывает бесконечное вращение и не вызывает onRefresh при тестировании приложения на iPhone. На устройствах Android и iOS с кнопкой home все работает как положено.

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 не вызывает.

1 Ответ

0 голосов
/ 08 мая 2019

У меня была похожая ситуация (хотя мой FlatList был внутри SafeAreaView, не окруженный ими). То, что мне помогло, - это использовать, на мой взгляд, смутно описанный компонент RefreshControl, а не устанавливать onRefresh и обновлять реквизиты напрямую. Не видя остальной части вашего кода (и импортируя 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}
    />
  }
/>
...
...