特定于平台的模块

¥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.

app/_layout.tsx

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

平台特定扩展

¥Platform specific extensions

Metro 打包器的特定于平台的扩展（例如，.ios.tsx 或 .native.tsx）在应用目录中不受支持。这确保了路由在深度链接的跨平台上是通用的。但是，你可以在应用目录外部创建特定于平台的文件，并在应用目录中使用它们。

¥Metro bundler's platform-specific extensions (for example, .ios.tsx or .native.tsx) are not supported in the app directory. This ensures that routes are universal across platforms for deep linking. However, you can create platform-specific files outside the app directory and use them from within the app directory.

考虑以下项目：

¥Consider the following project:

app

_layout.tsx

index.tsx

about.tsx

components

about.tsx

about.ios.tsx

about.web.tsx

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

¥For example, 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.

app/about.tsx

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

最佳实践：始终提供不带平台扩展名的文件，以确保每个平台都有默认实现。

平台模块

平台特定扩展