平台专属扩展和模块

了解如何使用平台特定的扩展和 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:

在 src/app 目录内

🌐 Within src/app directory

Metro bundler 的平台特定扩展（例如 .android.tsx、.ios.tsx、.native.tsx 或 .web.tsx）仅在 src/app 目录中支持，如果 非平台版本 也存在。这确保了路由在各个平台上对于深度链接都是通用的。

🌐 Metro bundler's platform-specific extensions (for example, .android.tsx, .ios.tsx, .native.tsx, or .web.tsx) are supported in the src/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 文件用于网页布局，而 _layout.tsx 用于其他所有平台。
• index.tsx 文件被用作所有平台的首页。
• about.web.tsx 文件用于网页的关于页面，而 about.tsx 文件用于所有其他平台。

在 src/app 目录之外

🌐 Outside src/app directory

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

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

考虑以下项目结构：

🌐 Consider the following project structure:

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

🌐 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 src/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 src/app directory.

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

平台模块

🌐 Platform module

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

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