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

Question

我有这组组件:

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(工作):

我该如何解决这个问题？

谢谢!

Answer 1

方法一

添加flex: 1到父视图：

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

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

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

方法2

将您的移动SearchBox到ListHeaderComponent的支柱FlatList：

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

方法三

给你SearchBox以下风格：

{ position: 'absolute', zIndex: 1 }

请参阅方法 1 了解如何将其传递给wrapped View。如果SearchBox来自第三方模块，则只需用以下内容将其包装View：

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

方法4

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

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

它的API 略有不同，因此我更改了传递给 prop 的数据形状sections。可能需要进一步的改变。

编辑

您有一个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>
  )}
/>

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