Нижний колонтитул вместе с панелью поиска не отображается должным образом в FlatList - PullRequest
Новая
       22

Нижний колонтитул вместе с панелью поиска не отображается должным образом в FlatList

0 голосов
/ 12 мая 2018

У меня есть этот набор компонентов: 

render() {
        return (
            <InstantSearch
                appId="29FLVJV5X9"
                apiKey="f2534ea79a28d8469f4e81d546297d39"
                indexName="prod_conferences"
                style={{ flexGrow: 1 }}>
                <Configure filters={`startDateUnix>${TODAY}`} hitsPerPage={10} />
                <SearchBox />
                <LoadingIndicator />
                <Conferences/>
            </InstantSearch>)
    }

Где <InstantSearch> - это простое <View>

Мои конференции: 

export default connectInfiniteHits(({ hits, hasMore, refine }) => {

  const LoadMoreFooter = connectStateResults(
    ({ searching }) =>
      !searching ? <View style={s.loadMoreButtonContainer}>
        <Divider style={s.loadMoreButtonDivider} />
        <Button transparent color={'#53acfe'} title={'Load more confs...'} onPress={() => refine()} />
      </View> : null
  );

  return (
    <FlatList
      data={hits}
      keyExtractor={(item, index) => item.objectID}
      ListFooterComponent={<LoadMoreFooter />}
      renderItem={({ item }) =>
        <ConferenceItem {...item} />
      }
    />
  );
});

А <SearchBox> представляет собой простой <SearchBar> из RN-элементов. Проблема в том, что после того, как я добавил SearchBox, мой нижний колонтитул никогда не отображается, прокрутка «останавливается» перед отображением нижнего колонтитула.

С помощью панели поиска (не работает): enter image description here

Без SearchBar (работает): enter image description here

Как я могу это исправить?

Спасибо!

1 Ответ

0 голосов
/ 15 мая 2018

Метод 1

Добавьте flex: 1 к родительскому представлению: 

<InstantSearch style={{ flex: 1 }}>

В вашем InstantSearch убедитесь, что вы передали стиль внешнему виду: 

const InstantSearch = props => <View style={props.style}>...

Метод 2

Переместите SearchBox в ListHeaderComponent опору FlatList: 

<FlatList ListHeaderComponent={() => <SearchBox />} ...

Метод 3

Дайте SearchBox следующий стиль: 

{ position: 'absolute', zIndex: 1 }

См. Способ 1 о том, как передать его в завернутый View.Если SearchBox из стороннего модуля, просто оберните его с помощью View: 

<View style={{ position: 'absolute', zIndex: 1 }}>
  <SearchBox />
</View>

Метод 4

Используйте SectionList вместо FlatList, чтобы избежать SearchBox прокручивается вниз (как в методе 2). 

<SectionList
  renderSectionHeader={SearchBox}
  sections={[{ data: hits }]}

У него немного другой API , поэтому я изменил форму данных, чтобы перейти к sections prop.Могут потребоваться дальнейшие изменения.

РЕДАКТИРОВАТЬ

У вас есть дополнительный View, который вы не включили в OP, и вы не переместили SearchBox в renderSectionHeader.Все, что занимает место сверху, должно быть перемещено с RootContainer на ConferenceList: 

<SectionList
  sections={groupAndSortConferences(hits)}
  renderItem={({ item }) => <ConferenceItem {...item} />}
  keyExtractor={item => item.uuid}
  ListFooterComponent={<LoadMoreFooter />}
  renderSectionHeader={() => (
    <View>
      {Platform.OS === 'ios' && <View style={{ height: 24, backgroundColor: '#FFCA04' }} />}
      <SearchBox />
    </View>
  )}
/>

Жестко закодированный View, который вы добавили для ios, чтобы заменить строку состояния, хотя и кажется странным, но это отдельная проблема.

...