外观元素

了解如何在使用 Expo Router 的应用中使用启动画面、字体和图片。

你可以使用三个主要元素来自定义应用的外观：

¥There are three major elements that you can use to customize the appearance of your app:

• 字体

  ¥Fonts

• 图片

  ¥Images

• 启动画面

  ¥Splash screen

字体

¥Fonts

Expo Router 扩展了 expo-splash-screen API 以防止白闪。将其与 expo-font 结合使用，以在加载字体时保持启动屏幕可见：

¥Expo Router extends the expo-splash-screen API to prevent white flash. Use it in conjunction with expo-font to keep the splash screen visible while fonts are loading:

import {
  SplashScreen,
  // This example uses a basic Layout component, but you can use any Layout.
  Slot,
} from 'expo-router';
import { useFonts, Inter_500Medium } from '@expo-google-fonts/inter';

SplashScreen.preventAutoHideAsync();

export default function Layout() {
  const [fontsLoaded, fontError] = useFonts({
    Inter_500Medium,
  });

  useEffect(() => {
    if (fontsLoaded || fontError) {
      // Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  // Prevent rendering until the font has loaded or an error was returned
  if (!fontsLoaded && !fontError) {
    return null;
  }

  // Render the children routes now that all the assets are loaded.
  return <Slot />;
}

在 SDK 50 及以上版本中，Expo Router 的 静态渲染 提供了 自动静态优化 用于网页上的字体加载。这使得在浏览器中使用字体的最佳实践成为可能。

¥In SDK 50 and above, Expo Router's static rendering provides automatic static optimization for font loading on web. This enables best practices for working with fonts in the browser.

图片

¥Images

我们建议你使用 Expo Image 以获得最佳的跨平台体验：

¥We recommend you use Expo Image for the best cross-platform experience:

Expo 图片 API 参考

有关如何安装和使用 expo-image 的更多信息，请参阅其 API 文档。

启动画面

¥Splash screen

在 Expo Router v3 及更高版本中，你可以直接从 expo-splash-screen 导入 SplashScreen。

¥In Expo Router v3 and greater, you can import SplashScreen from expo-splash-screen directly.

原生平台需要启动画面。Expo Router 会自动编排原生初始屏幕，使其保持可见，直到渲染第一个路由，这适用于用户深度链接到的任何路由。要启用此功能，请在你的项目中添加 安装 expo-splash-screen。

¥Splash screens are required on native platforms. Expo Router automatically orchestrates the native splash screen to keep it visible until the first route is rendered, this applies to any route that the user deep links into. To enable this functionality, install expo-splash-screen in your project.

默认行为是在渲染第一个路由时隐藏启动屏幕，这对于大多数路由来说是最佳的。对于某些路由，你可能希望延长启动屏幕，直到其他数据或资源加载结束。这可以通过 expo-router 的 SplashScreen 模块来实现。如果在隐藏启动屏幕之前调用 SplashScreen.preventAutoHideAsync，则启动屏幕将保持可见，直到调用 SplashScreen.hideAsync() 函数为止。

¥The default behavior is to hide the splash screen when the first route is rendered, this is optimal for the majority of routes. For some routes, you may want to prolong the splash screen until additional data or asset loading has concluded. This can be achieved with the SplashScreen module from expo-router. If SplashScreen.preventAutoHideAsync is called before the splash screen is hidden, then the splash screen will remain visible until the SplashScreen.hideAsync() function has been invoked.

import { Text } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [isReady, setReady] = React.useState(false);

  React.useEffect(() => {
    // Perform some sort of async data or asset fetching.
    setTimeout(() => {
      // When all loading is setup, unmount the splash screen component.
      SplashScreen.hideAsync();
      setReady(true);
    }, 1000);
  }, []);

  return <Text>My App</Text>;
}

支持安全区域

¥Supporting safe areas

Expo Router 附带安装的 react-native-safe-area-context 库。该库提供了灵活的 API，用于访问 Android 和 iOS 的设备安全区域插入信息。

¥Expo Router comes with the react-native-safe-area-context library installed. This library provides a flexible API for accessing device-safe area inset information for both Android and iOS.

要使用它，请从 react-native-safe-area-context 导入 SafeAreaProvider 组件并用它封装你的根布局：

¥To use it, import the SafeAreaProvider component from react-native-safe-area-context and wrap your root layout with it:

%%placeholder-start%%Other import statements %%placeholder-end%%
import { SafeAreaProvider } from 'react-native-safe-area-context';

function RootLayoutNav() {
  const colorScheme = useColorScheme();

  return (
    <SafeAreaProvider>
      <Stack>
        <Screen name="index" options={{ headerShown: false }} />
      </Stack>
    </SafeAreaProvider>
  );
}

在页面组件上，你可以使用 <SafeAreaView> 组件或 useSafeAreaInsets 钩子来访问安全区域插入并将其与 <View> 一起使用。以下示例显示如何使用 useSafeAreaInsets：

¥On a page component, you can use <SafeAreaView> component or useSafeAreaInsets hook to access the safe area insets and use them with <View>. The following example shows how to use useSafeAreaInsets:

import { StyleSheet, View, Text } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function TabOneScreen() {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Text style={styles.title}>Home page</Text>
    </View>
  );
}

React 导航主题

¥React Navigation themes

React Navigation 导航器 <Stack>、<Drawer> 和 <Tabs> 使用共享外观提供程序。在 React Navigation 中，你可以使用 <NavigationContainer /> 组件设置整个应用的主题。Expo Router 管理根容器，以便你可以直接使用 ThemeProvider 设置主题。

¥React Navigation navigators <Stack>, <Drawer>, and <Tabs> use a shared appearance provider. In React Navigation, you set the theme for the entire app using the <NavigationContainer /> component. Expo Router manages the root container so that you can set the theme using the ThemeProvider directly.

import { ThemeProvider, DarkTheme, DefaultTheme, useTheme } from '@react-navigation/native';
import { Slot } from 'expo-router';

export default function RootLayout() {
  return (
    <ThemeProvider value={DarkTheme}>
      <Slot />
    </ThemeProvider>
  );
}

你可以在应用的任何层使用此技术来设置特定布局的主题。可以使用 useTheme 从 @react-navigation/native 访问当前主题。

¥You can use this technique at any layer of the app to set the theme for a specific layout. The current theme can be accessed with useTheme from @react-navigation/native.

React 导航元素

¥React Navigation Elements

@react-navigation/elements 库提供了一组可用于构建导航 UI 的 UI 元素和辅助程序。这些组件被设计为可组合和可定制的。你可以重用库中的默认功能或在其之上构建导航器的 UI。

¥The @react-navigation/elements library provides a set of UI elements and helpers that can be used to build a navigation UI. These components are designed to be composable and customizable. You can reuse the default functionality from the library or build your navigator's UI on top of it.

要将其与 Expo Router 一起使用，你需要安装该库：

¥To use it with Expo Router, you need to install the library:

要了解有关该库提供的组件和实用程序的更多信息，请参阅 元素库 文档。

¥To learn more about the components and utilities the library provides, see Elements library documentation.