重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
react-native-navigation by pluginagentmarketplace/custom-plugin-react-native
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react-native --skill react-native-navigation学习使用 React Navigation v6+ 和 Expo Router 实现生产就绪的导航模式。
完成此技能后,你将能够:
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
# 用于标签页
npm install @react-navigation/bottom-tabs
# 用于抽屉
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
import { createNativeStackNavigator } from '@react-navigation/native-stack';
type RootStackParamList = {
Home: undefined;
Details: { id: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
function RootNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MainTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
}
const linking = {
prefixes: ['myapp://', 'https://myapp.com'],
config: {
screens: {
Home: 'home',
Details: 'details/:id',
},
},
};
<NavigationContainer linking={linking}>
{/* navigators */}
</NavigationContainer>
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
function HomeScreen() {
const navigation = useNavigation<NavigationProp>();
return (
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details', { id: '123' })}
/>
);
}
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
type RootStackParamList = {
Home: undefined;
Details: { id: string; title: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
| 错误 | 原因 | 解决方案 |
|---|---|---|
| "找不到导航器" | 缺少 NavigationContainer | 将应用包裹在 NavigationContainer 中 |
| 参数未定义 | 类型不匹配 | 检查 ParamList 类型 |
| 深度链接不工作 | 配置不匹配 | 验证链接路径 |
Skill("react-native-navigation")
绑定代理 : 02-react-native-navigation
每周安装数
46
代码仓库
GitHub 星标数
5
首次出现
2026年1月21日
安全审计
安装于
opencode39
gemini-cli38
codex37
github-copilot34
cursor30
claude-code29
Learn production-ready navigation patterns using React Navigation v6+ and Expo Router.
After completing this skill, you will be able to:
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
# For tabs
npm install @react-navigation/bottom-tabs
# For drawers
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
import { createNativeStackNavigator } from '@react-navigation/native-stack';
type RootStackParamList = {
Home: undefined;
Details: { id: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
function RootNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);
}
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MainTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
}
const linking = {
prefixes: ['myapp://', 'https://myapp.com'],
config: {
screens: {
Home: 'home',
Details: 'details/:id',
},
},
};
<NavigationContainer linking={linking}>
{/* navigators */}
</NavigationContainer>
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
function HomeScreen() {
const navigation = useNavigation<NavigationProp>();
return (
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details', { id: '123' })}
/>
);
}
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
type RootStackParamList = {
Home: undefined;
Details: { id: string; title: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
| Error | Cause | Solution |
|---|---|---|
| "Navigator not found" | Missing NavigationContainer | Wrap app in NavigationContainer |
| Params undefined | Type mismatch | Check ParamList types |
| Deep link not working | Config mismatch | Verify linking paths |
Skill("react-native-navigation")
Bonded Agent : 02-react-native-navigation
Weekly Installs
46
Repository
GitHub Stars
5
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode39
gemini-cli38
codex37
github-copilot34
cursor30
claude-code29
Tailwind CSS v4 + shadcn/ui 生产级技术栈配置指南与最佳实践
2,600 周安装