平台专属扩展和模块

了解如何使用平台特定的扩展和 React Native 的平台模块在 Expo Router 中根据平台切换模块。

在构建应用时，你可能希望根据当前平台显示特定内容。平台特定的扩展和 Platform 模块可以使体验更贴近特定平台。以下部分介绍了使用 Expo Router 实现此目的的方法。

¥While building your app, you may want to show specific content based on the current platform. Platform-specific extensions and Platform module can make the experience more native to a given platform. The following sections describe the ways you can achieve this with Expo Router.

平台专属扩展

¥Platform-specific extensions

Expo Router 3.5.x 中添加了平台特定的扩展。如果你使用的是旧版本的库，请按照 平台特定模块 中的说明进行操作。

有两种方法可以使用平台特定的扩展：

¥There are two ways to use platform-specific extensions:

在应用目录中

¥Within app directory

仅当存在非平台版本时，Metro 打包器的平台特定扩展程序（例如 .android.tsx、.ios.tsx、.native.tsx 或 .web.tsx）才支持在应用目录中使用。这确保了路由在深度链接的跨平台上是通用的。

¥Metro bundler's platform-specific extensions (for example, .android.tsx, .ios.tsx, .native.tsx, or .web.tsx) are supported in the app directory only if a non-platform version also exists. This ensures that routes are universal across platforms for deep linking.

考虑以下项目结构：

¥Consider the following project structure:

在上述文件结构中：

¥In the above file structure:

• _layout.web.tsx 文件在 Web 端用作布局，_layout.tsx 文件在所有其他平台上使用。

  ¥_layout.web.tsx file is used as a layout on the web and _layout.tsx is used on all other platforms.

• index.tsx 文件用作所有平台的主页。

  ¥index.tsx file is used as the home page for all platforms.

• about.web.tsx 文件在 Web 端用作关于页面，about.tsx 文件在所有其他平台上使用。

  ¥about.web.tsx file is used as the about page for the web, and the about.tsx file is used on all other platforms.

应用目录外部

¥Outside app directory

你可以在应用目录外创建带有扩展名（例如 .android.tsx、.ios.tsx、.native.tsx 或 .web.tsx）的特定于平台的文件，并在应用目录中使用它们。

¥You can create platform-specific files with extensions (for example, .android.tsx, .ios.tsx, .native.tsx, or .web.tsx) outside the app directory and use them from within the app directory.

考虑以下项目结构：

¥Consider the following project structure:

在上述文件结构中，设计要求你为每个平台构建不同的 about 屏幕。在这种情况下，你可以使用平台扩展在组件目录中为每个平台创建一个组件。导入时，Metro 将确保基于当前平台使用正确的组件版本。然后，你可以将组件重新导出为应用目录中的屏幕。

¥In the above file structure, the designs require you to build different about screens for each platform. In that case, you can create a component for each platform in the components directory using platform extensions. When imported, Metro will ensure the correct component version is used based on the current platform. You can then re-export the component as a screen in the app directory.

export { default } from '../components/about';

平台模块

¥Platform module

你可以使用 React Native 中的 Platform 模块来检测当前平台并根据结果渲染适当的内容。例如，你可以在原生上渲染 Tabs 布局，在 Web 上渲染自定义布局。

¥You can use the Platform module from React Native to detect the current platform and render the appropriate content based on the result. For example, you can render a Tabs layout on native and a custom layout on the web.

import { Platform } from 'react-native';
import { Link, Slot, Tabs } from 'expo-router';

export default function Layout() {
  if (Platform.OS === 'web') {
    // Use a basic custom layout on web.
    return (
      <div style={{ flex: 1 }}>
        <header>
          <Link href="/">Home</Link>
          <Link href="/settings">Settings</Link>
        </header>
        <Slot />
      </div>
    );
  }
  // Use a native bottom tabs layout on native platforms.
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="settings" options={{ title: 'Settings' }} />
    </Tabs>
  );
}