题意:React Native Expo Router - 隐藏主页上的堆栈标题。

问题背景:

I'm using expo-router in my React Native Expo app containing 2 screens, app/home.js and app/details.js. There is a Link on home.js that navigates to details.js screen.

我在 React Native Expo 应用中使用 expo-router,其中包含两个屏幕,app/home.jsapp/details.js。在 home.js 上有一个 Link,用于导航到 details.js 屏幕。

Right now both screens have the header on the top of the screen. Is there a way to disable the header only for the home.js screen? After navigation from the home screen to the details screen, the header on the details screen should still show the back arrow for the user to navigate back up to the home screen.

现在这两个屏幕的顶部都有标题。有没有办法仅对 home.js 屏幕禁用标题?从主页导航到详情屏幕后,详情屏幕上的标题仍然应该显示返回箭头,以便用户能够返回主页。

app/_layout.js

import { Stack } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {

  return (
    <SafeAreaProvider>
      <Stack
        initialRouteName="home"
      />
    </SafeAreaProvider>
  );
}

问题解决:

From the expo-router docs:   来自 expo-router 文档:

You can use a layout's Screen component to configure the header bar dynamically from within the route. This is good for interactions that change the UI.

So in your home.js (or in any route for which you may want a custom header) you can add:

因此,在你的 home.js(或任何你可能想要自定义标题的路由)中,你可以添加:

    <Stack.Screen options={{ header: () => null }} />

Even though you cannot disable the header per-se, you can replace it with a custom element which is null. This will visually remove the header for any route you add it to. Of course, the header on details.js will stay the same.

尽管你不能直接禁用标题,但你可以用一个自定义元素替换它,该元素为 null。这将视觉上移除你添加到的任何路由的标题。当然,details.js 上的标题将保持不变。

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐