SuperAPI AI 工具集

react-native-design

前端与建站

查看项目

更新于 10-15 16:45

技能介绍

用途:在构建 React Native 跨平台移动应用时,提供样式、导航、动画与性能优化方面的实践参考,目标是实现接近原生质量的用户体验。

主要能力:样式方面涵盖 StyleSheet.create、动态样式数组、styled-components;布局方面讲解 Flexbox 的行列、space-between、居中与填充;导航方面涵盖 React Navigation 的 Stack Navigator 与 Bottom Tab Navigator,包含 TypeScript 的 ParamList 类型定义与 screenOptions 配置;动画方面使用 Reanimated 3 的 useSharedValue、useAnimatedStyle、withSpring、withTiming 做 UI 线程动画,并结合 Gesture Handler 的 Gesture.Pan 实现拖拽手势;另有 Platform.select 处理 iOS/Android 差异,以及 SafeArea、FlatList、React.memo、useCallback 等最佳实践。

使用方式:按资料示例导入相应库(如 react-native-reanimated、@react-navigation/native、@react-navigation/native-stack、@react-navigation/bottom-tabs、react-native-gesture-handler),在组件中创建样式、导航容器与动画值即可。示例代码保持原样使用。

适用场景:构建跨平台移动应用、实现导航、创建高性能动画、响应式布局、平台特定设计与手势交互、优化性能时。

限制与常见问题:资料仅给出概念与代码示例,未提供具体安装命令、版本要求、收费或价格信息,这些暂未提供。常见问题包括手势冲突、导航类型错误、动画卡顿、内存泄漏、字体加载与安全区域问题;建议在真机测试,长列表使用 FlatList,避免内联样式。