javascript - 是否有 'fixed header' 或 'sticky header' 用于 native react ？

Question

有没有办法让顶部标题栏(我认为它被称为标题？)用于 react 原生？

几乎就像一个状态栏，它总是在那里。但它需要位于顶部(甚至在 react 导航的“标题”之前)

我的计划是在那里放一个全局搜索输入，这样你就可以在应用程序的任何地方搜索(搜索内容不受当前屏幕的影响。纯全局搜索始终可用。)

有没有办法做到这一点？我目前正在使用 expo 和 react-navigation。

- - 编辑

我添加了显示我的意思的线框屏幕截图。您会注意到无论您在哪个屏幕上，搜索栏都保持在顶部。这是一个全局搜索栏。

- 编辑

我想我需要说清楚。我正在尝试使用 react 导航 .我想我需要使用“createAppContainer”或任何创建导航器功能，如“createDrawerNavigator”，并找出一种方法来放置带有可导航屏幕的固定标题。

Answer 1

react native 的组件 FlastList有房产ListHeaderComponent用于渲染一个标题和另一个用于粘贴它stickyHeaderIndices .这正是您所需要的。
在 ListHeaderComponent您将呈现您的搜索字段并使用 stickyHeaderIndices={[0]}将其设置为粘性标题:

<FlatList
    data={ this.state.data }
    renderItem={({item}) =>  this.renderItem(item)}
    ListHeaderComponent={this.renderHeader}
    stickyHeaderIndices={[0]}
/>

查看工作 example .