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道具，该道具会影响所有屏幕。有关更多道具，请阅读文档voice。

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

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

1 个答案: