Css 页脚和搜索栏未正确显示在平面列表中

我有这套组件：

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

render（）{
返回(
${TODAY}`}hitsPerPage={10}/>
)
}

其中

是一个简单的

我的会议：

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} />
      }
    />
  );
});

export default connectInfiniteHits（{hits，hasMore，refine}）=>{
const LoadMoreFooter=connectStateResults(
（{搜索}）=>
！搜索？
优化（）}/>
：null
);
返回(
item.objectID}
ListFooterComponent={}
renderItem={（{item}）=>
}
/>
);
});

而

是来自RN元素的简单

。 问题是，在我添加搜索框后，我的页脚永远不会显示，在显示页脚之前，滚动“停止”

使用搜索栏（不工作）：

不带搜索栏（工作）：

我怎样才能解决这个问题

谢谢

方法1 将

flex:1

添加到父视图：

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

方法2 将您的

搜索框

移动到

平面列表

的

列表标题组件

道具：

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

<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>
  )}
/>

有关如何将其传递到包装的

视图

的信息，请参见方法1。如果

SearchBox

来自第三方模块，则只需使用

视图将其包装起来即可：

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

它有一个属性，因此我将数据形状更改为传递到
节
属性。可能需要进一步的修改

编辑
您有一个额外的
视图
，未包含在OP中，并且您没有将
搜索框
移动到
renderSectionHeader
。顶部所有占用空间的内容都应该从
RootContainer
移动到
ConferenceList
：

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

<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>
  )}
/>

}
keyExtractor={item=>item.uuid}
ListFooterComponent={}
renderSectionHeader={（）=>(
{Platform.OS==='ios'&&}
)}
/>

您为ios添加的硬编码的
视图
取代了状态栏，这看起来很粗糙，但这是另一个问题

谢谢您的回答，但它不起作用。在方法1中，InstantSearch组件来自第三方库，因此我无法编辑它。方法2是不好的，因为如果我在ios上已经在顶部时向下滚动，搜索框就会被拉下来，这是一个糟糕的行为。还有其他建议吗？感谢您提供了另外两种方法。还要检查
InstantSearch
API/源代码，它可能已经为
视图
容器的样式分配了一个道具。仍然不走运，尝试了所有方法：（如果有帮助的话，这是一个开源项目，其组成部分是这样的：我认为突出显示的行是一个黑客解决方法，但我非常确定有一个比硬编码一些“随机”更好的选择。）数字！感谢您再次在帖子中编辑。如果更新后的代码仍然不起作用，请提交。您是否尝试向页脚组件添加额外的填充？如果您在页脚组件中添加一些填充底部或增加其高度，这应该可以解决您的问题。此外，也许您可以使用contentInset道具以更优雅的方式执行此操作。是的，这与此完全相同我有！但这对我来说太难了，我想可能有一个更优雅的解决方案（比如，如果你使用底杆或类似的东西）
<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>
  )}
/>