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