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

Question

我有这组组件：

my_bytes.endswith('%3D')

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} /> } /> ); }); 是来自RN元素的简单<SearchBox>。 问题是，在我添加了SearchBox后，我的页脚从未显示，滚动＆＃34;停止＆＃34;在显示页脚之前。

使用SearchBar（不工作）：

没有SearchBar（工作）：

我该如何解决？

谢谢！

Answer 1

方法1

将flex: 1添加到父视图中：

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

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

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

方法2

将SearchBox移至ListHeaderComponent的{​​{1}}道具：

FlatList

方法3

为您的<FlatList ListHeaderComponent={() => <SearchBox />} ... 提供以下格式：

SearchBox

请参阅方法1，了解如何将其传递给包裹的{ position: 'absolute', zIndex: 1 } 。如果View来自第三方模块，则只需使用SearchBox包裹它：

View

方法4

使用<View style={{ position: 'absolute', zIndex: 1 }}> <SearchBox /> </View> 代替SectionList，以避免FlatList向下滚动（与方法2一样）。

SearchBox

它有slightly different API所以我更改了数据形状以传递给<SectionList renderSectionHeader={SearchBox} sections={[{ data: hits }]} 道具。可能需要进一步的更改。

修改

您还有一个额外的sections未包含在OP中，并且未将View移至SearchBox。占据空间的顶部的所有内容都应从renderSectionHeader移至RootContainer：

ConferenceList

你为ios添加的用于替换状态栏的硬编码<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> )} /> 看起来很糟糕，但这是一个单独的问题。