react native学习record one month
React Native 开发主要面向“跨平台原生 App 开发”
🧠 一、基础能力
-
JavaScript / TypeScript
• 熟练掌握 ES6+(async/await、Promise、Map、Set 等)
• 熟悉 TypeScript 类型系统(常用类型定义、接口、联合类型、泛型) -
React 核心
• 函数组件 + Hook(useState、useEffect、useCallback、useRef 等)
• 状态管理(Context、Redux、Zustand、Recoil 等)
• 生命周期模拟(useEffect 替代 componentDidMount 等)
• 组件拆分与复用(高阶组件、Render Props、组合模式)
⸻
📱 二、React Native 专项技能
-
UI 与布局
• Flexbox 布局(RN 中主要使用 flex)
• StyleSheet.create 与动态样式处理
• 尺寸适配(Dimensions、PixelRatio、react-native-responsive 等)
• 多分辨率与不同平台(iOS / Android)适配 -
常用组件
• ScrollView、FlatList、SectionList
• Text、View、Image、TouchableOpacity
• 自定义按钮、输入框、模态框等常见 UI 元件 -
导航与路由
• react-navigation:Stack、Tab、Drawer 等导航模式
• 动态路由、参数传递、嵌套导航 -
本地能力调用
• 相册、摄像头、麦克风(如 react-native-image-picker)
• 定位(如 react-native-geolocation)
• 推送通知(如 Firebase Messaging)
• 深度链接(Deep Linking)
⸻
🛠 三、工程能力
-
项目配置
• Metro 构建工具基本使用
• 多环境配置(dev/staging/prod)
• 使用 .env 和 react-native-config -
第三方库集成
• react-native-vector-icons
• react-native-gesture-handler
• react-native-reanimated -
热更新与版本发布
• 使用 CodePush 实现 JS 热更新
• 与 App Store / Google Play 的发布流程
• 支持灰度、版本控制
⸻
🔧 四、调试与性能优化
-
调试工具
• React Native Debugger
• Flipper 调试平台
• Chrome DevTools + console -
性能优化
• FlatList 大量数据优化
• 避免不必要的 re-render(使用 React.memo、useCallback)
• 懒加载与分页处理
• 使用 shouldComponentUpdate / PureComponent
⸻
🧩 五、Native 能力(进阶)
这一部分是进阶开发中要掌握的,特别是涉及 桥接通信、封装原生模块 时。
-
原生模块封装
• iOS(Swift/Objective-C)
• Android(Kotlin/Java)
• 使用 NativeModules、TurboModule 与 RN 通信 -
Native 与 JS 通信机制
• Bridge 桥接机制
• Native Event Emitters
• 双向通信模型(例如 React Native 与 WebView 通信)
⸻
🔗 六、跨端开发实践
• 使用 Platform 模块判断平台差异
• 封装跨平台组件(统一 UI 和逻辑)
• 多端样式 / 动画适配(Android 和 iOS 差异大)
⸻
🧪 七、测试与质量保障
• 单元测试:jest + @testing-library/react-native
• 端到端测试:detox
• 崩溃监控与日志采集:Sentry、Firebase Crashlytics
⸻
📦 八、推荐学习路线
1. 学习 React 和 TS 基础
2. 完成一个完整的 RN 项目(如 ToDo List、IM、短视频)
3. 深入导航、列表、图片缓存等优化
4. 学会打包和上线
5. 掌握原生模块封装 + 热更新
6. 看懂调试工具 + 性能分析工具使用