mcpField
R
react-native-app

react-native-app

github.com/aj-geddes开发373505 次安装34 周前更新
代码仓库

关于 react-native-app

用于使用 React Native 构建跨平台移动应用的技能，面向移动开发者，涵盖导航、状态管理、API 集成和原生模块，并提供设置与实现参考。

主要功能

  1. 01开发 iOS 和 Android 应用
  2. 02使用 React Navigation 处理导航
  3. 03使用 Redux 或 Context API 管理状态
  4. 04使用 Axios 集成 API
  5. 05处理原生模块和平台差异

适用场景

  1. 01用一套代码构建 iOS 和 Android 应用
  2. 02快速制作移动应用原型
  3. 03在 React Native 与 React Web 间共享代码
  4. 04集成原生模块与 API

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill react-native-app

安装后在 Claude Code 中输入/react-native-app确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
api-integration-with-axios.md
functional-component-with-hooks.md
project-setup-navigation.md
state-management-with-redux.md
templates/
component-template.tsx

详细介绍

React Native 应用开发

目录

概述

使用 React Native 构建稳健的跨平台移动应用，采用现代开发模式，包括导航、状态管理、API 集成和原生模块处理。

适用场景

  • 使用单一代码库构建 iOS 和 Android 应用
  • 在移动平台上快速制作原型
  • 将 Web 开发技能应用于移动开发
  • 在 React Native 和 React Web 之间共享代码
  • 与原生模块和 API 集成

快速开始

最简可运行示例：

// Navigation with React Navigation
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function HomeStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: "#6200ee" },
        headerTintColor: "#fff",
        headerTitleStyle: { fontWeight: "bold" },
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: "Home Feed" }}
      />
      <Stack.Screen name="Details" component={DetailsScreen} />
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
项目设置与导航项目设置与导航
使用 Redux 进行状态管理使用 Redux 进行状态管理
使用 Axios 集成 API使用 Axios 集成 API
使用 Hooks 的函数组件使用 Hooks 的函数组件

最佳实践

✅ 应该做
  • 使用带有 React Hooks 的函数组件
  • 实现恰当的错误处理和加载状态
  • 使用 Redux 或 Context API 进行状态管理
  • 使用 React Navigation 实现路由
  • 使用 FlatList 优化列表渲染
  • 优雅地处理平台特定代码
  • 使用 TypeScript 确保类型安全
  • 在 iOS 和 Android 上进行测试
  • 使用环境变量配置 API 端点
  • 实现恰当的内存管理
❌ 不应该做
  • 过度使用内联样式（请使用 StyleSheet）
  • 在没有错误处理的情况下发起 API 调用
  • 以纯文本形式存储敏感数据
  • 忽略平台差异
  • 创建大型单体组件
  • 在列表中使用 index 作为 key
  • 执行同步操作
  • 忽略电池优化
  • 未在真实设备上测试就部署
  • 忘记取消订阅监听器

评论

支持 Markdown