Javascript 是否有一个'；固定收割台'；或'；粘头'；对于本地人？

有没有办法为react native设置固定和渗透的顶部标题栏（我想它被称为Header？）

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

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

有办法做到这一点吗？我目前正在与世博会和react navigation合作

---编辑

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

--编辑

我想我需要说清楚。我正试图用导航来实现这一点。我想我需要使用“createAppContainer”或任何像“createDrawerNavigator”这样的创建导航器功能，并找到一种方法将可导航屏幕放入固定标题中

---

react native的组件有一个属性

ListHeaderComponent

，用于呈现标题，另一个属性用于粘贴标题

stickyHeaderIndices

。这正是你需要的

在

ListHeaderComponent

中，您将呈现搜索字段，并使用

stickyHeaderIndices={[0]}

将其设置为粘性标题：

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

this.renderItem（项目）}
ListHeaderComponent={this.renderHeader}
stickyHeaderIndices={[0]}
/>

---

查看工作。

您需要创建一个具有

位置：'absolute'

样式属性的组件（以及一个设置

最小高度

——您希望搜索栏的高度）。然后，您可以将其导入根级组件，并在应用程序内容（页面容器）的其余部分（页面容器）上添加一个

marginTop:…

style属性，该属性等于为标题/搜索栏设置的

minHeight

这样，标题将显示在所有页面上，而应用程序的其余内容将不会显示在标题后面

你可以找到这方面的一个基本例子

我自己找到的方法。=）

因此，关键是引入自定义导航器

自定义导航器可以扩展我现有的选项卡导航器，渲染部分可以返回我想要的几乎任何内容以及我的选项卡导航器将具有的常规视图

我的应用程序有抽屉和标签导航器。在我的例子中，Drawer Navigator有很多路由，其中一个路由是扩展TabNavigator的自定义导航器

这是我的密码：

const MyTab = createBottomTabNavigator({
  FirstTabStack,
  SecondTabStack,
  ThirdTabStack,
  FourthTabStack,
});

class CustomNavigator extends React.Component {
  static router = MyTab.router;
  render() {
    const { navigation } = this.props;

    return (
      {/* This SafeAreaView is from ReactNavigation. 
          forceInset-bottom-never is needed because  the 
          TabNavigator is already Safe-area-ing the bottom. 
          You don't want to do it again.*/}
      <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
        {/* SearchHeader is zIndex: 1(or elevation: 1) for the absolute 
            positioned stuff that appears and cover the 
            screen after focusing on Input. */}
        <SearchHeader/>
        <MyTab navigation={navigation} />
      </SafeAreaView>
    );
  }
}


export default createDrawerNavigator({
  CustomNavigator,
  SettingsScreen,
  LegalScreen,
  FeedbackScreen,
  VersionScreen,
}, {
  drawerType: 'slide',
  drawerWidth: 260,
});

---

是否要在导航标题栏上方放置搜索栏？你有这样的例子吗？！是的。我会把它画出来并更新我的问题！谢谢你的回答，但这不是我想要的。我用一个示例截图编辑了我的问题！我懂了。然后您需要创建一个组件并在每个屏幕上导入它。。。（HOC也是一个解决方案，谢谢！是的。我创建了一个组件，并像你说的那样添加到每个屏幕上。只是当屏幕导航时，动画很难看，搜索输入的值在屏幕之间不共享（我可以使用道具或任何存储，比如redux，来传递它）.hmmm谢谢！我会尽力让您知道发生了什么！我需要使用ReactNavigation中“createAppContainer”创建的视图的固定标题。我会尝试！

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        zIndex: 1,
      },
      android: {
        elevation: 1
      },
    }),
  },
  {...}
})