javascript - 有反应原生的 'fixed header' 或 'sticky header' 吗？

有没有办法让固定和永久的顶部标题栏(我认为它被称为标题栏？)用于 native react ？

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

我的计划是在那里放置一个全局搜索输入，因此您可以在应用程序的任何位置进行搜索(搜索内容不受当前显示的屏幕影响。纯全局搜索始终可用。)

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

- - 编辑

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

- 编辑

我想我有必要说清楚。我正在尝试使用 ReactNavigation 来做到这一点。我想我需要使用“createAppContainer”或任何像“createDrawerNavigator”这样的创建导航器功能，并找出一种方法来将固定标题与可导航的屏幕一起放入。

最佳答案

react native 的组件 FlastList 有一个属性 ListHeaderComponent 用于渲染标题，另一个用于粘贴 stickyHeaderIndices 。这正是您所需要的。

在 ListHeaderComponent 中，您将呈现您的搜索字段，并使用 stickyHeaderIndices={[0]} 将其设置为粘性标题:

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

检查工作 example 。

关于javascript - 有反应原生的 'fixed header' 或 'sticky header' 吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55264425/