时间戳

首页 > 解决方案 > 在 FlatList 中未正确显示页脚和搜索栏

css - 在 FlatList 中未正确显示页脚和搜索栏

问题描述

我有这组组件：

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 之后，我的页脚从未显示，滚动在显示页脚之前“停止”。

使用 SearchBar（不工作）： 在此处输入图像描述

没有 SearchBar（工作）： 在此处输入图像描述

我该如何解决？

谢谢！

标签： cssreact-nativeflexboxreact-native-flatlist

解决方案

方法一

添加flex: 1到父视图：

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

在您的InstantSearch中，确保将样式传递给最外层的视图：

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

方法二

将你SearchBox的ListHeaderComponent道具移动到FlatList：

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

方法三

给你SearchBox以下风格：

{ position: 'absolute', zIndex: 1 }

请参阅方法 1，了解如何将其传递给被包裹的View. 如果SearchBox来自第三方模块，则只需将其包装为View：

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

方法四

使用SectionList而不是FlatList避免SearchBox向下滚动（与方法 2 一样）。

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

它有一个稍微不同的 API，所以我更改了数据形状以传递给sectionsprop。可能需要进一步更改。

编辑

您有一个未包含在 OP 中的额外View内容，并且您没有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>
  )}
/>

您为 ios 添加的用于替换状态栏的硬编码View虽然看起来很笨拙，但这是一个单独的问题。

推荐阅读