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

Question

我正在尝试为我的导航容器中的每个屏幕设置一个默认的 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>
  )
};

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