Question

有没有办法固定和渗透的top-titlebar（我认为它叫做Header？）来响应本机？

几乎像状态栏一样，它始终存在。但是它必须位于顶部（甚至在反应导航的“标题”之前）

我的计划是在此处放置全局搜索输入，以便可以在应用程序中的任何位置进行搜索（搜索内容不受当前所显示屏幕的影响。始终可以使用纯全局搜索。）

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

---编辑

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

-编辑

我想我必须说清楚这一点。我正在尝试使用 ReactNavigation 来做到这一点。我想我需要使用“ createAppContainer”或任何诸如“ createDrawerNavigator”之类的创建导航器功能，并想出一种方法将可定位屏幕插入固定标题。

Answer 1

react native的组件FlastList具有用于渲染标头的属性mysql --protocol=tcp -u root -p和另一个用于粘贴标头的属性ListHeaderComponent。这正是您所需要的。

在stickyHeaderIndices中，您将呈现搜索字段，并使用ListHeaderComponent将其设置为粘性标头：

stickyHeaderIndices={[0]}

查看有效的example。

Answer 2

您需要创建一个具有position: 'absolute'样式属性（以及一组minHeight-您希望搜索栏的高度）的组件。然后，您可以将其导入到根级组件中，并将marginTop: ...样式属性放在其余应用内容（页面容器）上，该属性等于您为标题/搜索栏设置的minHeight。< / p>

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

您可以找到此here

的基本示例

Answer 3

我自己找到了路。 =）

所以关键是要引入自定义导航器。

Custom Navigator可以扩展我现有的Tab Navigator，并且渲染部分可以返回几乎我想要的任何内容以及TabNavigator将拥有的常规视图。

我的应用程序具有“抽屉”和“选项卡导航器”。因此，在我的情况下，Drawer Navigator有许多路由，其中一个路由是扩展TabNavigator的Custom Navigator。

这是我的代码：

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

PS。如果要在TabNavigator的渲染位置叠加一些绝对位置视图，请确保对iOS使用 zIndex ，对于Android使用 elevation ！就我而言，SearchHeader组件具有：

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

是否有用于响应本机的“固定标头”或“粘性标头”？

3 个答案: