mobile-app by popup-studio-ai/bkit-claude-code
npx skills add https://github.com/popup-studio-ai/bkit-claude-code --skill mobile-app一份基于 Web 开发经验的移动应用开发指南。使用跨平台框架同时为 iOS 和 Android 开发。
| 框架 | 层级 | 推荐度 | 适用场景 |
|---|---|---|---|
| React Native (Expo) | 层级 1 | ⭐ 首选 | TypeScript 生态系统,AI 工具 |
| React Native CLI | 层级 1 | 推荐 | 需要原生模块 |
| Flutter | 层级 2 | 支持 | 多平台 (6 个操作系统),性能 |
AI 原生推荐 : React Native with TypeScript
- 完整的 Copilot/Claude 支持
- 丰富的 npm 生态系统
- 开发者数量是 Dart 的 20:1
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
性能推荐 : Flutter
初学者 → Expo (React Native) [层级 1]
- 设置简单,可以利用 Web 知识
- 完整的 AI 工具支持
进阶 → Expo + EAS Build [层级 1] 或 Flutter [层级 2]
- 包含服务器集成,生产构建支持
- 多平台需求选择 Flutter
企业级 → React Native CLI [层级 1] 或 Flutter [层级 2]
- 需要复杂的原生功能、性能优化
- 跨平台 UI 一致性选择 Flutter
# 安装 Expo CLI
npm install -g expo-cli
# 创建新项目
npx create-expo-app my-app
cd my-app
# 启动开发服务器
npx expo start
my-app/
├── app/ # Expo Router 页面
│ ├── (tabs)/ # 标签页导航
│ │ ├── index.tsx # 主页标签页
│ │ ├── explore.tsx # 探索标签页
│ │ └── _layout.tsx # 标签页布局
│ ├── _layout.tsx # 根布局
│ └── +not-found.tsx # 404 页面
├── components/ # 可复用组件
├── hooks/ # 自定义钩子
├── constants/ # 常量
├── assets/ # 图片、字体等
├── app.json # Expo 配置
└── package.json
// app/_layout.tsx - 堆栈导航
import { Stack } from 'expo-router';
export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
</Stack>
);
}
// app/(tabs)/_layout.tsx - 标签页导航
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
export default function TabLayout() {
return (
<Tabs>
<Tabs.Screen
name="index"
options={{
title: '主页',
tabBarIcon: ({ color }) => <Ionicons name="home" color={color} size={24} />,
}}
/>
<Tabs.Screen
name="profile"
options={{
title: '个人资料',
tabBarIcon: ({ color }) => <Ionicons name="person" color={color} size={24} />,
}}
/>
</Tabs>
);
}
// 基本 StyleSheet
import { StyleSheet, View, Text } from 'react-native';
export function MyComponent() {
return (
<View style={styles.container}>
<Text style={styles.title}>你好</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: '#fff',
},
title: {
fontSize: 24,
fontWeight: 'bold',
},
});
// NativeWind (RN 版 Tailwind) - 推荐
import { View, Text } from 'react-native';
export function MyComponent() {
return (
<View className="flex-1 p-4 bg-white">
<Text className="text-2xl font-bold">你好</Text>
</View>
);
}
// hooks/useApi.ts
import { useState, useEffect } from 'react';
export function useApi<T>(endpoint: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}${endpoint}`);
if (!response.ok) throw new Error('API 错误');
const json = await response.json();
setData(json);
} catch (e) {
setError(e as Error);
} finally {
setLoading(false);
}
};
fetchData();
}, [endpoint]);
return { data, loading, error };
}
// context/AuthContext.tsx
import { createContext, useContext, useState, useEffect } from 'react';
import * as SecureStore from 'expo-secure-store';
interface AuthContextType {
user: User | null;
signIn: (email: string, password: string) => Promise<void>;
signOut: () => Promise<void>;
}
const AuthContext = createContext<AuthContextType | null>(null);
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
// 应用启动时检查存储的令牌
const loadToken = async () => {
const token = await SecureStore.getItemAsync('authToken');
if (token) {
// 使用令牌加载用户信息
}
};
loadToken();
}, []);
const signIn = async (email: string, password: string) => {
const response = await fetch('/api/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
const { token, user } = await response.json();
await SecureStore.setItemAsync('authToken', token);
setUser(user);
};
const signOut = async () => {
await SecureStore.deleteItemAsync('authToken');
setUser(null);
};
return (
<AuthContext.Provider value={{ user, signIn, signOut }}>
{children}
</AuthContext.Provider>
);
}
export const useAuth = () => useContext(AuthContext)!;
# 安装 Flutter SDK 后
flutter create my_app
cd my_app
# 启动开发服务器
flutter run
my_app/
├── lib/
│ ├── main.dart # 应用入口点
│ ├── app/
│ │ ├── app.dart # MaterialApp 设置
│ │ └── routes.dart # 路由定义
│ ├── features/ # 基于功能的文件夹
│ │ ├── auth/
│ │ │ ├── screens/
│ │ │ ├── widgets/
│ │ │ └── providers/
│ │ └── home/
│ ├── shared/
│ │ ├── widgets/ # 通用小部件
│ │ ├── services/ # API 服务
│ │ └── models/ # 数据模型
│ └── core/
│ ├── theme/ # 主题设置
│ └── constants/ # 常量
├── assets/ # 图片、字体
├── pubspec.yaml # 依赖管理
└── android/ & ios/ # 原生代码
// lib/features/home/screens/home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('主页'),
),
body: const Center(
child: Text('你好,Flutter!'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
}
}
// lib/providers/counter_provider.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
return CounterNotifier();
});
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() => state++;
void decrement() => state--;
}
// 用法
class CounterScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Text('计数: $count');
}
}
| 元素 | Web | 移动端 |
|---|---|---|
| 点击 | onClick | onPress |
| 滚动 | overflow: scroll | ScrollView / FlatList |
| 输入 | input | TextInput |
| 链接 | a href | Link / navigation |
| 布局 | div + CSS | View + StyleSheet |
Web: 基于 URL (浏览器后退按钮)
Mobile: 基于堆栈 (屏幕堆叠)
Web: /users/123
Mobile: navigation.navigate('User', { id: 123 })
Web: localStorage, sessionStorage, Cookie
Mobile: AsyncStorage, SecureStore, SQLite
⚠️ 移动端敏感信息必须使用 SecureStore!
# 安装 EAS CLI
npm install -g eas-cli
# 登录
eas login
# 配置构建
eas build:configure
# iOS 构建
eas build --platform ios
# Android 构建
eas build --platform android
# 提交到商店
eas submit --platform ios
eas submit --platform android
// app.json
{
"expo": {
"extra": {
"apiUrl": "https://api.example.com"
}
}
}
// 用法
import Constants from 'expo-constants';
const apiUrl = Constants.expoConfig?.extra?.apiUrl;
□ 识别需要离线缓存的数据
□ 定义同步冲突解决策略
□ 遵循 iOS/Android 原生 UX 指南
□ 考虑手势 (滑动、捏合等)
□ 为不同屏幕尺寸 (手机、平板) 设计布局
□ 键盘处理 (输入时屏幕调整)
□ 安全区域处理 (刘海屏、主屏幕按钮区域)
□ 处理平台特定的 UI 差异
□ 使用 SecureStore 存储敏感信息
□ 证书锁定 (如果需要)
□ 应用混淆设置
□ 遵循 App Store 审核指南
□ 准备隐私政策 URL
□ 准备截图、应用描述
答:建议创建独立项目而非完全转换
- API 可以共享
- UI 需要重写 (以获得原生 UX)
- 业务逻辑可以共享
答:从 Expo 开始!
- 90%+ 的应用使用 Expo 就足够了
- 后续如有需要可以弹出 (eject)
- 仅在绝对需要原生模块时使用 CLI
答:
- iOS: 1-7 天 (平均 2-3 天)
- Android: 几小时 ~ 3 天
⚠️ 首次提交被拒可能性高 → 仔细遵循指南!
"使用 React Native + Expo 设置一个 [应用描述] 应用项目。
配置包含 3 个标签页导航 (主页、搜索、个人资料)。"
"实现 [屏幕名称] 屏幕。
- 在顶部显示 [内容]
- 在中间显示 [列表/表单等]
- 在底部显示 [按钮/导航]"
"实现与 [API 端点] 集成的屏幕。
- 显示加载状态
- 处理错误
- 支持下拉刷新"
周安装量
76
仓库
GitHub 星标数
443
首次出现
2026 年 1 月 30 日
安全审计
安装于
opencode70
gemini-cli68
github-copilot67
codex66
cursor66
claude-code62
A guide for developing mobile apps based on web development experience. Develop for iOS and Android simultaneously using cross-platform frameworks.
| Framework | Tier | Recommendation | Use Case |
|---|---|---|---|
| React Native (Expo) | Tier 1 | ⭐ Primary | TypeScript ecosystem, AI tools |
| React Native CLI | Tier 1 | Recommended | Native module needs |
| Flutter | Tier 2 | Supported | Multi-platform (6 OS), performance |
AI-Native Recommendation : React Native with TypeScript
- Full Copilot/Claude support
- Extensive npm ecosystem
- 20:1 developer availability vs Dart
Performance Recommendation : Flutter
- Impeller rendering engine
- Single codebase for 6 platforms
- Smaller bundles
Starter → Expo (React Native) [Tier 1]
- Simple setup, can leverage web knowledge
- Full AI tool support
Dynamic → Expo + EAS Build [Tier 1] or Flutter [Tier 2]
- Includes server integration, production build support
- Choose Flutter for multi-platform needs
Enterprise → React Native CLI [Tier 1] or Flutter [Tier 2]
- Complex native features, performance optimization needed
- Flutter for consistent cross-platform UI
# Install Expo CLI
npm install -g expo-cli
# Create new project
npx create-expo-app my-app
cd my-app
# Start development server
npx expo start
my-app/
├── app/ # Expo Router pages
│ ├── (tabs)/ # Tab navigation
│ │ ├── index.tsx # Home tab
│ │ ├── explore.tsx # Explore tab
│ │ └── _layout.tsx # Tab layout
│ ├── _layout.tsx # Root layout
│ └── +not-found.tsx # 404 page
├── components/ # Reusable components
├── hooks/ # Custom hooks
├── constants/ # Constants
├── assets/ # Images, fonts, etc.
├── app.json # Expo configuration
└── package.json
// app/_layout.tsx - Stack navigation
import { Stack } from 'expo-router';
export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
</Stack>
);
}
// app/(tabs)/_layout.tsx - Tab navigation
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
export default function TabLayout() {
return (
<Tabs>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color }) => <Ionicons name="home" color={color} size={24} />,
}}
/>
<Tabs.Screen
name="profile"
options={{
title: 'Profile',
tabBarIcon: ({ color }) => <Ionicons name="person" color={color} size={24} />,
}}
/>
</Tabs>
);
}
// Basic StyleSheet
import { StyleSheet, View, Text } from 'react-native';
export function MyComponent() {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: '#fff',
},
title: {
fontSize: 24,
fontWeight: 'bold',
},
});
// NativeWind (Tailwind for RN) - Recommended
import { View, Text } from 'react-native';
export function MyComponent() {
return (
<View className="flex-1 p-4 bg-white">
<Text className="text-2xl font-bold">Hello</Text>
</View>
);
}
// hooks/useApi.ts
import { useState, useEffect } from 'react';
export function useApi<T>(endpoint: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}${endpoint}`);
if (!response.ok) throw new Error('API Error');
const json = await response.json();
setData(json);
} catch (e) {
setError(e as Error);
} finally {
setLoading(false);
}
};
fetchData();
}, [endpoint]);
return { data, loading, error };
}
// context/AuthContext.tsx
import { createContext, useContext, useState, useEffect } from 'react';
import * as SecureStore from 'expo-secure-store';
interface AuthContextType {
user: User | null;
signIn: (email: string, password: string) => Promise<void>;
signOut: () => Promise<void>;
}
const AuthContext = createContext<AuthContextType | null>(null);
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
// Check for stored token on app start
const loadToken = async () => {
const token = await SecureStore.getItemAsync('authToken');
if (token) {
// Load user info with token
}
};
loadToken();
}, []);
const signIn = async (email: string, password: string) => {
const response = await fetch('/api/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
const { token, user } = await response.json();
await SecureStore.setItemAsync('authToken', token);
setUser(user);
};
const signOut = async () => {
await SecureStore.deleteItemAsync('authToken');
setUser(null);
};
return (
<AuthContext.Provider value={{ user, signIn, signOut }}>
{children}
</AuthContext.Provider>
);
}
export const useAuth = () => useContext(AuthContext)!;
# After installing Flutter SDK
flutter create my_app
cd my_app
# Start development server
flutter run
my_app/
├── lib/
│ ├── main.dart # App entry point
│ ├── app/
│ │ ├── app.dart # MaterialApp setup
│ │ └── routes.dart # Route definitions
│ ├── features/ # Feature-based folders
│ │ ├── auth/
│ │ │ ├── screens/
│ │ │ ├── widgets/
│ │ │ └── providers/
│ │ └── home/
│ ├── shared/
│ │ ├── widgets/ # Common widgets
│ │ ├── services/ # API services
│ │ └── models/ # Data models
│ └── core/
│ ├── theme/ # Theme settings
│ └── constants/ # Constants
├── assets/ # Images, fonts
├── pubspec.yaml # Dependency management
└── android/ & ios/ # Native code
// lib/features/home/screens/home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: const Center(
child: Text('Hello, Flutter!'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
}
}
// lib/providers/counter_provider.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
return CounterNotifier();
});
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() => state++;
void decrement() => state--;
}
// Usage
class CounterScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Text('Count: $count');
}
}
| Element | Web | Mobile |
|---|---|---|
| Click | onClick | onPress |
| Scroll | overflow: scroll | ScrollView / FlatList |
| Input | input | TextInput |
| Links | a href | Link / navigation |
| Layout | div + CSS | View + StyleSheet |
Web: URL-based (browser back button)
Mobile: Stack-based (screen stacking)
Web: /users/123
Mobile: navigation.navigate('User', { id: 123 })
Web: localStorage, sessionStorage, Cookie
Mobile: AsyncStorage, SecureStore, SQLite
⚠️ SecureStore is required for sensitive info on mobile!
# Install EAS CLI
npm install -g eas-cli
# Login
eas login
# Configure build
eas build:configure
# iOS build
eas build --platform ios
# Android build
eas build --platform android
# Submit to stores
eas submit --platform ios
eas submit --platform android
// app.json
{
"expo": {
"extra": {
"apiUrl": "https://api.example.com"
}
}
}
// Usage
import Constants from 'expo-constants';
const apiUrl = Constants.expoConfig?.extra?.apiUrl;
□ Identify data that needs offline caching
□ Define sync conflict resolution strategy
□ Follow iOS/Android native UX guidelines
□ Consider gestures (swipe, pinch, etc.)
□ Layout for different screen sizes (phone, tablet)
□ Keyboard handling (screen adjustment during input)
□ Safe Area handling (notch, home button area)
□ Handle platform-specific UI differences
□ Store sensitive info with SecureStore
□ Certificate Pinning (if needed)
□ App obfuscation settings
□ Follow App Store review guidelines
□ Prepare Privacy Policy URL
□ Prepare screenshots, app description
A: Recommend separate project over full conversion
- APIs can be shared
- UI needs to be rewritten (for native UX)
- Business logic can be shared
A: Start with Expo!
- 90%+ of apps are sufficient with Expo
- Can eject later if needed
- Use CLI only when native modules are absolutely required
A:
- iOS: 1-7 days (average 2-3 days)
- Android: Few hours ~ 3 days
⚠️ First submission has high rejection possibility → Follow guidelines carefully!
"Set up a [app description] app project with React Native + Expo.
Configure with 3 tab navigation (Home, Search, Profile)."
"Implement [screen name] screen.
- Display [content] at the top
- Display [list/form/etc.] in the middle
- [Button/navigation] at the bottom"
"Implement screen integrating with [API endpoint].
- Show loading state
- Handle errors
- Support pull-to-refresh"
Weekly Installs
76
Repository
GitHub Stars
443
First Seen
Jan 30, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode70
gemini-cli68
github-copilot67
codex66
cursor66
claude-code62
TanStack Query v5 完全指南:React 数据管理、乐观更新、离线支持
2,500 周安装