# 移动开发 ## React Native 组件结构从“react-native”导入{View、Text、FlatList、StyleSheet、Platform}；从“react-native-safe-area-context”导入{ SafeAreaView }；接口产品{ id：字符串；名称：字符串；价格：数量；图像：字符串； } 函数 ProductList({ 产品 }: { 产品: 产品[] }) { 返回（ <平面列表数据={产品} keyExtractor={(item) => item.id} renderItem={({ item }) => } contentContainerStyle={styles.list} ItemSeparatorComponent={() => } ListEmptyComponent={} 初始渲染数量={10} maxToRenderPerBatch={10} 窗口大小={5} /> ）； } const 样式 = StyleSheet.create({ 容器：{ 弹性：1，背景颜色：“#fff”， }, 列表：{ 填充：16， }, 分隔符：{ 高度：12， }, }); 将 `FlatList` 用于可滚动列表（切勿使用 `ScrollView` 和 `.map()`）。为大型列表设置“windowSize”和“maxToRenderPerBatch”。 ## 反应本机导航从“@react-navigation/native”导入{NavigationContainer}；从“@react-navigation/native-stack”导入{createNativeStackNavigator}；从“@react-navigation/bottom-tabs”导入{createBottomTabNavigator}；类型 RootStackParams = { 选项卡：未定义；产品详细信息：{ 产品 ID：字符串 }；购物车：未定义； }; const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); 函数 TabNavigator() { 返回（）； } 函数应用程序（）{ 返回（ <导航容器> <堆栈导航器> ）； } ## Flutter Widget 模式类 ProductCard 扩展 StatelessWidget { 最终产品；最终 VoidCallback onTap；常量产品卡({ 超级密钥，需要这个产品，需要 this.onTap, }); @覆盖小部件构建（BuildContext上下文）{ 返回手势检测器（点按：点按，孩子：卡（海拔：2，子项：列（ crossAxisAlignment：CrossAxisAlignment.start，孩子们：[ 剪辑R矩形（ borderRadius: const BorderRadius.vertical(顶部: Radius.circular(8)), 孩子：图像.网络（产品.imageUrl, 高度：200，宽度：双无穷大，适合：BoxFit.cover， errorBuilder: (_, __, ___) => const Icon(Icons.broken_image, 大小: 64), ), ), 填充（填充：const EdgeInsets.all(12), 子项：列（ crossAxisAlignment：CrossAxisAlignment.start，孩子们：[ Text(产品.名称, 样式: Theme.of(context).textTheme.titleMedium), 常量 SizedBox(高度: 4), Text("\$${product.price.toStringAsFixed(2)}", 样式：Theme.of(context).textTheme.bodyLarge), ], ), ), ], ), ), ）； } } ## 响应式布局从“react-native”导入{useWindowDimensions}；函数 useResponsive() { const { 宽度 } = useWindowDimensions(); 返回{ isPhone：宽度 < 768， isTablet: 宽度 >= 768 && 宽度 < 1024, isDesktop：宽度 >= 1024，列：宽度 < 768 ？ 1：宽度<1024？ 2：3， }; } 函数 ProductGrid({ 产品 }: { 产品: 产品[] }) { const { 列 } = useResponsive(); 返回（ <平面列表数据={产品} numColumns={列} 键={列} keyExtractor={(item) => item.id} renderItem={({ 项目 }) => ( <视图样式={{ flex: 1, maxWidth: `${100 / columns}%`, padding: 8 }}> )} /> ）； } ## 平台特定代码从“react-native”导入{平台}； const 样式 = StyleSheet.create({ 阴影：Platform.select({ ios：{ 阴影颜色：“#000”，阴影偏移：{宽度：0，高度：2}，阴影不透明度：0.1，阴影半径：4， }, 安卓：{ 海拔：4， }, 默认值：{}， }), }); ## 反模式 * 将 `ScrollView` 与 `.map()` 结合使用用于动态列表（使用 `FlatList` 或 `SectionList`） * 将所有状态存储在全局存储中，而不是与组件共置 * 不处理安全区域（缺口、状态栏、主页指示器） * 每个渲染上的内联样式（使用“StyleSheet.create”定义） * 阻塞计算量大的 JS 线程（使用 `InteractionManager`） * 忽略特定于平台的 UX 约定（iOS 后退滑动、Android 后退按钮） ## 清单 * `FlatList` 用于所有带有 `keyExtractor` 的可滚动列表 * 使用 TypeScript 路由参数输入导航 * 使用“SafeAreaView”处理安全区域插图 * 使用`StyleSheet.create`定义的样式（不是内联对象） * 响应式布局适应手机、平板电脑和台式机 * 使用 `Platform.select` 处理特定于平台的样式 * 缓存和加载的图像带有错误/加载状态 * 从 JS 线程中卸载大量计算

移动开发

包含技能