React Native 经验分享

For 迅雷团队分享

2017.04.14

提要

  • 个人介绍
  • React Native 的优势
  • React Native 使用现状
  • React Native 的坑
  • 总结 & thx

李亚飞

连续创业者, 全栈开发工程师, 专注于 web app & native app.

作品: cywin(创业赢), 8020(八十二十), 角落等

Github:  @windy

个人博客: yafeilee.me

React Native团队应用情况

  • 2016年5月全面从 Ionic 转向 React Native
  • 七个人的全栈工程师团队
  • 构建 4 个商业级 App( Android & iOS )
  • 平均构建耗时约 2 个月

一些截图

物业SASS应用( Android )

二手交易平台( iOS )

垂直直播平台( iOS )

为什么要用 React Native ?

1. 你构建的是 Native APP

2. 会 JS, 就能会 React Native

3. 友好的开发环境

4. 轮子及社区活跃

5. 一定的跨平台能力

React Native 使用现状

  • 国外
    • Facebook 本身在重度使用混合式开发
  • 国内
    • 小而美的技术团队深度使用( Striking.ly, 墨刀等 )
    • 中型团队混合式开如( 如 美团 APP )

谈谈 React Native 开发经验( 坑 )

iOS 键盘处理问题

  • 只有 iOS 下有问题
  • 缺省键盘遮挡
  • 引入 `IQKeyboardManager`
  • 在某些时候需要关闭
  • 试试我们的封装: `react-native-smart-keyboard`

数据驱动层选型

  • Redux
  • mobx

ListView 问题

  • 可能导致白屏
  • removeClippedSubviews 参数的利用
  • mobx 中传入数据需要用到 `toJS` 转换

iOS 消息通知

  • jPush
  • 证书配置
  • 不支持 release 模式发消息

布局问题

  • 与 CSS 差异很大
  • 仍然大大节省了传统 APP 布局的时间
  • Text 模式与 flex 模式

跨平台建议

  • 先研发一端如 iOS
  • 另一端除数据层外可以专门打磨, 互不影响
  • 相比 cordova 技术 React Native 跨平台更耗时

引入 pod 依赖管理工具

  • iOS 开发需要
  • 移除原项目的 react native core 项目
  • 集成 podfile
 pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'ART',
    'RCTActionSheet',
    'RCTGeolocation',
    'RCTImage',
    'RCTNetwork',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
    'RCTLinkingIOS',
    'RCTAnimation',
    'RCTAdSupport',
    'RCTCameraRoll',
    'RCTPushNotification',
    'RCTSettings'
  ]
  pod 'PLMediaStreamingKit'
  pod 'PLPlayerKit'
  pod 'RCTPili', :path => '../node_modules/react-native-pili/ios/RCTPili'
  pod 'KSCrash', '~> 1.8'

使用总结

  • 只有 web app 的 80% 开发体验
  • 需要有 "高级工程师" 掌握底层, hold 全局
  • 成熟度已经起来, 值得掌握
  • JS 在手, 天下我有

广告一波

技术文章变现工具: 八十二十, 扫码体验

我写了一篇 Turbolinks5, 卖了70多份

QA & Thx

Made with Slides.com