react-native-navigation：将自定义标题设置为除一个以外的所有屏幕答案

【问题标题】：react-native-navigation: set custom header to all screen except onereact-native-navigation：将自定义标题设置为除一个以外的所有屏幕
【发布时间】：2020-07-16 05:15:16
【问题描述】：

我想为堆栈导航器内的所有屏幕设置一个自定义标题，但特定屏幕除外，因为我希望它具有默认标题。我知道设置导航器选项道具的标题属性可以将自定义标题应用于所有屏幕，但我的问题是如何排除一个特定屏幕并将其设置为默认值？

这是我当前为所有屏幕设置自定义标题的实现：

<Stack.Navigator
  screenOptions={{
    header: () => <CustomHeader />,
  }}
>
  <Stack.Screen name="Page1" component={Page1} />
  <Stack.Screen name="Page2" component={Page2} />
  <Stack.Screen name="Page3" component={Page3} />
</Stack.Navigator>

我可以在此代码中进一步添加什么来排除自定义页眉对 Page3 的应用？

【问题讨论】：

标签： javascript react-native mobile header react-native-navigation

【解决方案1】：

试试这个。

    <Stack.Navigator>
      <Stack.Screen name="Page1" component={Page1} />
      <Stack.Screen name="Page2" component={Page2} />
      <Stack.Screen options={{ header: () => <CustomHeader /> }} name="Page3" component={Page3} />
    </Stack.Navigator>

【讨论】：

感谢您的回答。其实你回答了原来的问题，但我修改了我的问题，我忘了指出。我真正想要的是在设置自定义标题后保留特定屏幕的默认标题。

【解决方案2】：

如果有人想知道如何为 Drawer Navigator 做同样的事情，这里是我想出的解决方案：

import React, {Fragment} from 'react';

const NavHeader = props => {
 // ... NavHeader code goes here 
};

export const withHeader = Component => {
  return props => {
    return (
      <Fragment>
        <NavHeader {...props} />
        <Component {...props} />
      </Fragment>
    );
  };
};

然后在你的抽屉里做：

<Drawer.Navigator>
    <Drawer.Screen
      name={ROUTES.DASHBOARD}
      component={withHeader(DashboardContainer)} // <--- Wrap it around component here.
    />
</Drawer.Navigator>

如果您希望除一个以外的所有屏幕都具有自定义标题，您可以用withHeader 包裹每个组件，除了一个。

【讨论】：