# 移动开发构建跨平台移动应用程序。 ## 何时使用 * React Native开发 * 颤振开发 * 移动性能问题 * 原生模块集成 * 应用商店部署 ## 反应本机 ### 组件结构从“react”导入 React, { useState, useCallback }; 从“react-native”导入{View、Text、TouchableOpacity、StyleSheet}；接口道具 { 标题：字符串； onPress: () => void; } 导出函数 Button({ title, onPress }: Props) { const [按下，setPressed] = useState(false); const handlePress = useCallback(() => { setPressed(真); onPress(); }, [onPress]); 返回（ <可触摸不透明度 style={[styles.button, 按下 && styles.pressed]} onPress={handlePress} activeOpacity={0.7} > <文本样式={styles.text}>{标题} ）； } const 样式 = StyleSheet.create({ 按钮：{ 背景颜色：“#007AFF”，填充：16，边框半径：8， }, 按下：{ 不透明度：0.8， }, 文本：{ 颜色：“白色”，字体粗细：“600”，文本对齐：“居中”， }, }); ### 导航从“@react-navigation/native”导入{NavigationContainer}；从“@react-navigation/native-stack”导入{createNativeStackNavigator}；类型 RootStackParamList = { 主页：未定义；详细信息：{id：字符串}； }; const Stack = createNativeStackNavigator(); 函数应用程序（）{ 返回（ <导航容器> <堆栈导航器> ）； } ## 颤动 ### 小部件结构类 MyButton 扩展 StatelessWidget { 最终字符串标题；最终 VoidCallback onPressed；常量我的按钮({ 钥匙？钥匙，需要这个.title, 需要这个。onPressed， }) : 超级(键: 键); @覆盖小部件构建（BuildContext上下文）{ 返回高架按钮（ onPressed: onPressed, 样式：ElevatedButton.styleFrom( 填充：const EdgeInsets.all(16), 形状：圆角矩形边框（ borderRadius: BorderRadius.circular(8), ), ), 子项：文本（标题），）； } } ## 性能提示 * 对于长列表使用 FlatList/ListView * 使用 useCallback 记忆回调 * 避免内联样式（使用样式表） * 延迟加载屏幕和图像 * 使用 Flipper/DevTools 进行配置 ## 常见模式图案|反应本机 |颤动 ---|---|--- 状态|使用状态/Redux |设置状态/Riverpod 导航 |反应导航 |导航器2.0 HTTP |获取/axios | http/dio 存储|异步存储|共享首选项动画 |动画/复活 |动画控制器 ## 示例 **输入：**“构建列表屏幕” **操作：**使用虚拟化、下拉刷新、分页创建 FlatList **输入：**“添加离线支持” **操作：**实现 AsyncStorage 缓存、同步队列、网络检测

移动的

包含技能