React Native Expo路由器-在主屏幕上隐藏堆栈头

slmsl1lt  于 2023-03-31  发布在  React
关注(0)|答案(1)|浏览(214)

我在我的React Native Expo应用程序中使用expo-router,该应用程序包含两个屏幕,app/home.jsapp/details.js。在home.js上有一个Link,它可以导航到details.js屏幕。
现在两个屏幕的标题都在屏幕顶部。有没有办法只为home.js屏幕禁用标题?从主屏幕导航到详细信息屏幕后,详细信息屏幕上的标题仍然应该显示返回箭头,以便用户导航回主屏幕。

一米七三

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

export default function Layout() {

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

iih3973s1#

expo-routerdocs
您可以使用布局的Screen组件从路由中动态配置标题栏。这对于更改UI的交互非常有用。
因此,在您的home.js(或任何您可能想要自定义头的路由)中,您可以添加:

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

即使你不能禁用报头本身,你也可以用一个自定义元素null来替换它。这将在视觉上删除你添加到的任何路由的报头。当然,details.js上的报头将保持不变。

相关问题