主题

主题允许您更改 React Navigation 提供的各种组件的颜色。您可以使用主题来

• 自定义颜色以匹配您的品牌
• 根据一天中的时间或用户偏好提供浅色和深色主题

基本用法

要传递自定义主题，您可以将 theme 道具传递给导航容器。

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
  );
}

您可以动态更改主题道具，所有组件都会自动更新以反映新主题。如果您没有提供 theme 道具，将使用默认主题。

主题是一个包含要使用的颜色列表的 JS 对象。它包含以下属性

• dark (boolean): 这是否是深色主题或浅色主题
• colors (object): React Navigation 组件使用的各种颜色
  • primary (string): 用于对各种元素进行着色的应用程序的主要颜色。通常，您需要为此使用您的品牌颜色。
  • background (string): 各种背景的颜色，例如屏幕的背景颜色。
  • card (string): 类卡片元素的背景颜色，例如标题、标签栏等。
  • text (string): 各种元素的文字颜色。
  • border (string): 边框的颜色，例如标题边框、标签栏边框等。
  • notification (string): 标签导航器徽章的颜色。

创建自定义主题时，需要提供所有这些属性。

示例主题

const MyTheme = {
  dark: false,
  colors: {
    primary: 'rgb(255, 45, 85)',
    background: 'rgb(242, 242, 242)',
    card: 'rgb(255, 255, 255)',
    text: 'rgb(28, 28, 30)',
    border: 'rgb(199, 199, 204)',
    notification: 'rgb(255, 69, 58)',
  },
};

提供主题将负责所有官方导航器的样式。React Navigation 还提供了一些工具来帮助您自定义这些导航器，导航器内的屏幕也可以使用主题。

内置主题

随着操作系统添加对浅色和深色模式的内置支持，支持深色模式不再是追赶潮流，而是符合用户对应用程序工作方式的普遍预期。为了以与操作系统默认设置基本一致的方式提供对浅色和深色模式的支持，这些主题内置于 React Navigation 中。

您可以像这样导入默认主题和深色主题

import { DefaultTheme, DarkTheme } from '@react-navigation/native';

使用操作系统首选项

在 iOS 13+ 和 Android 10+ 上，您可以使用 (useColorScheme hook) 获取用户的首选配色方案 ('dark' 或 'light')。

import { useColorScheme } from 'react-native';
import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
} from '@react-navigation/native';

export default () => {
  const scheme = useColorScheme();

  return (
    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* content */}
    </NavigationContainer>
  );
};

在您自己的组件中使用当前主题

要访问导航容器内渲染的任何组件中的主题，可以使用 useTheme hook。它返回主题对象

import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '@react-navigation/native';

// Black background and white text in light theme, inverted on dark theme
function MyButton() {
  const { colors } = useTheme();

  return (
    <TouchableOpacity style={{ backgroundColor: colors.card }}>
      <Text style={{ color: colors.text }}>Button!</Text>
    </TouchableOpacity>
  );
}