界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
效率与协作 · SKILL.md

react-native-platform-specific

react-native-platform-specific

【效率与协作】Resolve iOS and Android differences using Platform API and native modules in React Native. Use when platform branching or native-module integration is the primary task; defer cross-platform feature implementation such as push notifications.

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: react-native-platform-specific description: Resolve iOS and Android differences using Platform API and native modules in React Native. Use when platform branching or native-module integration is the primary task; defer cross-platform feature implementation such as push notifications. metadata: triggers: files: - '/*.tsx' - '/.ts' - '**/.ios.' - '**/.android.*' keywords: - Platform - Platform.select - native-module - ios - android

React Native Platform-Specific Code

Priority: P1 (HIGH)

Split Platform-Specific Files

Use .ios. and .android. for platform-specific files:

See native modules reference for platform-specific file naming, Platform.select usage, and native bridge examples.

React Native automatically picks right file:

  • iOS: Button.ios.tsx then Button.tsx (fallback)
  • Android: Button.android.tsx then Button.tsx (fallback)

Apply Platform Branching Inline

Use Platform.select or Platform.OS for small differences within shared file.

Integrate Native Modules

  • Expo: Use Expo modules when available (expo-* packages).
  • Bare RN: Use community modules (@react-native-community/*).
  • Custom: Write native modules in Swift/Kotlin when needed.

Anti-Patterns

  • No Excessive Branching: Extract to separate files if logic diverges significantly.
  • No Hardcoded Version Checks: Use feature detection.
  • No Ignoring Android: Test on both platforms.

References

See references/native-modules.md for Platform detection examples, Native Bridge (iOS/Android), Expo JSI Modules, and SafeArea handling.

我的收藏