平台专属扩展和模块

了解如何使用平台特定的扩展和 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）只有在 app 目录中存在 非平台版本 的情况下才受支持。这确保了路由在各个平台上对于深度链接都是通用的。

🌐 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 文件用于网页布局，而 _layout.tsx 用于其他所有平台。
• index.tsx 文件被用作所有平台的首页。
• about.web.tsx 文件用于网页的关于页面，而 about.tsx 文件用于所有其他平台。

应用目录外部

🌐 Outside app directory

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

🌐 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 屏幕。在这种情况下，你可以在 components 目录中使用平台扩展为每个平台创建一个组件。导入时，Metro 会根据当前平台确保使用正确的组件版本。然后，你可以在 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 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 布局，而在网页上渲染自定义布局。

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