rn-navigation
Expo Routerナビゲーションの構築
React Nativeアプリには、タブバー、モーダル、ディープリンクのための適切なナビゲーションアーキテクチャが必要です。このスキルは、本番アプリ向けの実証済みExpo Routerパターンを提供します。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "rn-navigation". フィード、検索、プロフィール用の下部タブを持つアプリを作成してください。中央に作成モーダルを開くFABボタンを追加してください。
Résultat attendu:
Expo Routerディレクトリ構造を使用:
app/
├── _layout.tsx # Root layout with providers
├── (app)/
│ └── _layout.tsx # Tab layout with tabBar
├── (app)/_layout.tsx:
export default function AppLayout() {
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: '#007AFF',
headerShown: false,
}}>
<Tabs.Screen name="feed" />
<Tabs.Screen name="search" />
<Tabs.Screen
name="compose"
href={{ pathname: '/compose', params: { modal: true } }}
listeners={{ tabPress: (e) => e.preventDefault() }}
/>
<Tabs.Screen name="profile" />
</Tabs>
)
}
Utilisation de "rn-navigation". myapp://messages/123 が会話123のチャット画面を開くようにディープリンクをセットアップしてください
Résultat attendu:
app.jsonで:
{
"expo": {
"scheme": "myapp",
"plugins": [
[
"expo-router",
{ "origin": "myapp://" }
]
]
}
}
app/_layout.tsxまたはindex.tsxで:
const linking = {
prefixes: ['myapp://', 'https://myapp.com'],
config: {
screens: {
'(app)': {
screens: {
messages: {
path: 'messages/:conversationId',
parse: {
conversationId: (conversationId) => conversationId
}
}
}
}
}
}
}
export default function RootLayout() {
return (
<GestureHandlerRootView>
<SafeAreaProvider>
<NavigationContainer linking={linking}>
<Stack />
</NavigationContainer>
</SafeAreaProvider>
</GestureHandlerRootView>
)
}
Audit de sécurité
Risque faibleDocumentation-only skill for React Native navigation patterns. Static findings are false positives: backtick patterns are markdown code formatting, cryptographic alerts are scanner noise on text patterns, and URLs are legitimate metadata. No executable code or security concerns detected.
Score de qualité
Ce que vous pouvez construire
新しいアプリを構築するモバイル開発者
本番パターンに従って、タブ、スタック、ディープリンクを備えた新しいExpoアプリのナビゲーション構造をセットアップします。
複雑なナビゲーションを追加するチーム
モーダル、ネストされたルート、適切なディープリンク構成をサポートするために既存のナビゲーションをリファクタリングします。
ナビゲーション問題をデバッグする開発者
ナビゲーション状態の問題、ディープリンク処理の失敗、またはタブバーのレンダリング問題を診断します。
Essayez ces prompts
ホーム、プロフィール、設定画面を含むタブバーを持つReact NativeアプリのExpo Routerナビゲーション構造を作成してください。通知とプライバシーオプションを含む設定用のネストされたスタックを含めてください。
カスタムURLスキーム scheme://profile/settingsが設定スタックのプライバシー画面を開くように、Expoアプリのディープリンクを構成してください。app.jsonと連携フックの実装に必要な構成を示してください。
Expo Routerを使用して、背景のぼかしを伴って下からスライドアップするモーダルプレゼンテーションパターンを実装してください。ジェスチャーサポート付きの適切な却下処理を含めてください。
AsyncStorageを使用してナビゲーション状態の永続化を実装し、ユーザーがアプリ再起動後に正確な画面位置に戻れるようにしてください。ネストされたナビゲーション状態の復元ロジックを処理してください。
Bonnes pratiques
- (group)フォルダ規約を使用してナビゲーションスタックを整理し、共有レイアウトを管理する
- 本番環境でのパス解決の問題を避けるために、ディープリンクのプレフィックスを早期に構成する
- プラットフォーム間でジェスチャーの動作が異なるため、iOSとAndroidの両方でナビゲーションをテストする
Éviter
- 同じアプリ内でReact NavigationとExpo Routerを混在させないでください
- コンポーネント内にディープリンクURLをハードコードしないでください。動的なパス生成を使用してください
- 適切なエラーバウンダリなしで深いナビゲーション状態の変更を行わないでください