React Native Mobile Development by babakbar/vibekeeper
npx skills add https://github.com/babakbar/vibekeeper --skill 'React Native Mobile Development'使用 React Native 和 Expo 构建移动应用的指南。
# 开发
npm start # 启动 Metro 打包器
npm run ios # 在 iOS 模拟器上运行
npm run android # 在 Android 模拟器上运行
# Expo 特定命令
npx expo start # 使用 Expo CLI 启动
npx expo install PKG # 安装兼容的包
npx expo prebuild # 生成原生代码
// 移动组件模板
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
interface Props {
title: string;
onPress: () => void;
}
export function MyComponent({ title, onPress }: Props) {
return (
<TouchableOpacity onPress={onPress} style={styles.container}>
<Text style={styles.text}>{title}</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
padding: 16,
backgroundColor: '#007AFF',
borderRadius: 8,
},
text: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '600',
},
});
import { Platform } from 'react-native';
// 条件渲染
{Platform.OS === 'ios' && <IOSComponent />}
{Platform.OS === 'android' && <AndroidComponent />}
// 平台特定值
const height = Platform.select({
ios: 44,
android: 56,
default: 50,
});
// 平台特定样式
const styles = StyleSheet.create({
container: {
...Platform.select({
ios: { shadowColor: '#000', shadowOpacity: 0.3 },
android: { elevation: 4 },
}),
},
});
StyleSheet.create(),避免内联样式,优化图片accessibilityLabel 和 accessibilityRoleimport { FlatList } from 'react-native';
<FlatList
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <ItemComponent item={item} />}
/>
import { TextInput } from 'react-native';
const [value, setValue] = useState('');
<TextInput
value={value}
onChangeText={setValue}
placeholder="输入文本"
style={styles.input}
/>
import { ActivityIndicator } from 'react-native';
{loading ? <ActivityIndicator /> : <Content />}
npx expo start --clear 清除缓存npx expo prebuild --cleanapp.json 配置每周安装次数
–
代码仓库
首次出现
–
安全审计
Guide for building mobile apps with React Native and Expo.
# Development
npm start # Start Metro bundler
npm run ios # Run on iOS Simulator
npm run android # Run on Android Emulator
# Expo specific
npx expo start # Start with Expo CLI
npx expo install PKG # Install compatible packages
npx expo prebuild # Generate native code
// Mobile component template
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
interface Props {
title: string;
onPress: () => void;
}
export function MyComponent({ title, onPress }: Props) {
return (
<TouchableOpacity onPress={onPress} style={styles.container}>
<Text style={styles.text}>{title}</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
padding: 16,
backgroundColor: '#007AFF',
borderRadius: 8,
},
text: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '600',
},
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
import { Platform } from 'react-native';
// Conditional rendering
{Platform.OS === 'ios' && <IOSComponent />}
{Platform.OS === 'android' && <AndroidComponent />}
// Platform-specific values
const height = Platform.select({
ios: 44,
android: 56,
default: 50,
});
// Platform-specific styles
const styles = StyleSheet.create({
container: {
...Platform.select({
ios: { shadowColor: '#000', shadowOpacity: 0.3 },
android: { elevation: 4 },
}),
},
});
StyleSheet.create(), avoid inline styles, optimize imagesaccessibilityLabel and accessibilityRoleimport { FlatList } from 'react-native';
<FlatList
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <ItemComponent item={item} />}
/>
import { TextInput } from 'react-native';
const [value, setValue] = useState('');
<TextInput
value={value}
onChangeText={setValue}
placeholder="Enter text"
style={styles.input}
/>
import { ActivityIndicator } from 'react-native';
{loading ? <ActivityIndicator /> : <Content />}
npx expo start --clearnpx expo prebuild --cleanapp.json configurationWeekly Installs
–
Repository
First Seen
–
Security Audits
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
4,000 周安装