跳到主要内容
版本: 7.x

屏幕选项

每个屏幕都可以通过指定某些选项来配置其在渲染它的导航器中呈现方式的各个方面，例如，堆栈导航器中的标题，底部标签导航器中的标签栏图标等。不同的导航器支持不同的选项集。

在基础知识文档的配置标题栏部分，我们解释了其工作原理的基础知识。另请参阅屏幕选项解析指南，以了解当存在多个导航器时它们如何工作。

请参阅我们的文档，以了解有关如何将 TypeScript 与 screenOptions 和 options 一起使用的更多信息。

有 3 种指定屏幕选项的方法

Screen 组件上的 options 属性​

你可以将名为 options 的属性传递给 Screen 组件来配置屏幕，你可以在其中指定一个包含该屏幕不同选项的对象

const Stack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        title: 'Awesome app',
      },
    },
    Profile: {
      screen: ProfileScreen,
      options: {
        title: 'My profile',
      },
    },
  },
});

const Navigation = createStaticNavigation(Stack);

export default function App() {
  return <Navigation />;
}
在 Snack 上尝试

你也可以将一个函数传递给 options。该函数将接收该屏幕的 navigation 对象和 route 对象，以及 theme 对象。如果你想在你的选项中执行导航，这会很有用

const Stack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: ({ navigation }) => ({
        title: 'Awesome app',
        headerLeft: () => {
          <DrawerButton onPress={() => navigation.toggleDrawer()} />;
        },
      }),
    },
  },
});

Group 组件上的 screenOptions 属性​

你可以将名为 screenOptions 的属性传递给 Group 组件，以配置组内的屏幕，你可以在其中指定一个包含不同选项的对象。在 screenOptions 中指定的选项适用于组中的所有屏幕。

示例

const Stack = createNativeStackNavigator({
  groups: {
    App: {
      screenOptions: {
        headerStyle: {
          backgroundColor: '#FFB6C1',
        },
      },
      screens: {
        Home: ScreenWithButton('Home', 'Profile'),
        Profile: ScreenWithButton('Profile', 'Settings'),
      },
    },
    Modal: {
      screenOptions: {
        presentation: 'modal',
      },
      screens: {
        Settings: ScreenWithButton('Settings', 'Share'),
        Share: ScreenWithButton('Share'),
      },
    },
  },
});
在 Snack 上尝试

与 options 类似，你也可以将一个函数传递给 screenOptions。该函数将接收每个屏幕的 navigation 对象和 route 对象。如果你想根据路由在一个地方配置所有屏幕的选项，这会很有用

const Stack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  groups: {
    Modal: {
      screenOptions: {
        presentation: 'modal',
        headerLeft: () => <CancelButton onPress={navigation.goBack} />,
      },
      screens: {
        Settings: Settings,
        Share: Share,
      },
    },
  },
});

导航器上的 screenOptions 属性​

你可以将名为 screenOptions 的属性传递给导航器组件，你可以在其中指定一个包含不同选项的对象。在 screenOptions 中指定的选项适用于导航器中的所有屏幕。因此，这是指定要为整个导航器配置的选项的好地方。

示例

const Stack = createNativeStackNavigator({
  screenOptions: {
    headerStyle: {
      backgroundColor: 'papayawhip',
    },
  },
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

与 options 类似，你也可以将一个函数传递给 screenOptions。该函数将接收每个屏幕的 navigation 对象和 route 对象。如果你想根据路由在一个地方配置所有屏幕的选项，这会很有用

const Tab = createBottomTabNavigator({
  screenOptions: ({ route }) => ({
    tabBarIcon: ({ color, size }) => {
      const icons = {
        Home: 'home',
        Profile: 'account',
      };

      return (
        <MaterialCommunityIcons
          name={icons[route.name]}
          color={color}
          size={size}
        />
      );
    },
  }),
  screens: {
    Home: EmptyScreen,
    Profile: EmptyScreen,
  },
});
在 Snack 上尝试

navigation 对象有一个 setOptions 方法，允许你从组件内部更新屏幕的选项。有关更多详细信息，请参阅导航对象的文档。

<Button onPress={() => navigation.setOptions({ title: 'Updated!' })}>
  Update options
</Button>