如何为 React Navigation 的导航容器中的所有屏幕设置相同的屏幕选项？答案

【问题标题】：How to set the same screen options for all screens within a navigation container for React Navigation?如何为 React Navigation 的导航容器中的所有屏幕设置相同的屏幕选项？
【发布时间】：2020-09-24 08:18:59
【问题描述】：

我正在尝试为导航容器中的每个屏幕设置默认的options 参数。我目前正在重新使用相同的选项配置并为每个屏幕手动设置它。然而，这似乎有点多余。 React Navigation 中是否有一种更简洁的方法来为特定导航容器中的所有屏幕设置默认的、可重复使用的 options 参数（可以在需要时覆盖）？

我当前的代码如下：

const CafeStack = createStackNavigator();

const CafeteriasScreen = () => {
  return (
    <CafeStack.Navigator>
      <CafeStack.Screen
        name='Home'
        component={CafeteriasFeed}
        options={({ route }) => ({
          headerLeft: null,
        })}
      />
      <CafeStack.Screen
        name='Crossroads'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='Cafe 3'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='International House'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='Clark Kerr'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='Foothill'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='Pat Browns'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
    </CafeStack.Navigator>
  )
};

【问题讨论】：

标签： javascript react-native react-navigation react-navigation-stack react-navigation-v5

【解决方案1】：

您获得了影响所有屏幕的 Navigator 的 screenOptions 属性。更多道具请阅读文档https://reactnavigation.org/docs/stack-navigator。

const CafeStack = createStackNavigator();

const CafeteriasScreen = () => {
  return (
    <CafeStack.Navigator screenOptions={{
        headerBackTitleVisible: false,
      }}>
      <CafeStack.Screen
        name='Home'
        component={CafeteriasFeed}
        options={({ route }) => ({
          headerLeft: null,
        })}
      />
      <CafeStack.Screen
        name='Crossroads'
        component={DiningHallScreen}
      />
      <CafeStack.Screen
        name='Cafe 3'
        component={DiningHallScreen}
      />
      <CafeStack.Screen
        name='International House'
        component={DiningHallScreen}
      />
      <CafeStack.Screen
        name='Clark Kerr'
        component={DiningHallScreen}
      />
      <CafeStack.Screen
        name='Foothill'
        component={DiningHallScreen}
      />
      <CafeStack.Screen
        name='Pat Browns'
        component={DiningHallScreen}
      />
    </CafeStack.Navigator>
  )
};

【讨论】：