React Native & V2HOT

React Native & V2HOT刘易成

About

• 美团-平台业务部-前端组-城市⽀支撑组

• http://github.com/xcatliu/V2HOT

内容概要

• React Native 简单介绍

• 以⼀一个前端的视⾓角，使⽤用 React Native 完整的开发⼀一个应⽤用 V2HOT

React Native 是什么

• 使⽤用 JavaScript 和 React 开发原⽣生（native ）应⽤用

• Write once, run anywhere

• Learn once, write anywhere

React Native 的特点• Native iOS Components

• Asynchronous Execution

• Touch Handling

• Flexbox and Styling — css的⼦子集

• Polyfills

• Extensibility

React Native 的现状

• 在⽣生产环境有⼀一定⻛风险

• Facebook有3款App（Groups、Ads Manager、F8）使⽤用了React Native

• 社区活跃，https://react.parts/native-ios 有 100+ 个组件（react-web 有 800+ 个）

React Native 的未来

• React Native for Android

• October

• http://facebook.github.io/react/blog/2015/03/30/community-roundup-26.html

V2HOT 开发实践

• 准备

• OS X，XCode，Homebrew，node，watchman，flow，npm，react-native-cli

• https://github.com/xcatliu/V2HOT

Hello World

• XCode，Debugging

• View，Text

• Styling — Flexbox，StyleSheet

• 0.1.0

List View

• Fetching and rendering v2ex hot topics

• ListView，Image

• ⼩小插曲：报错升级到 0.4.1 解决

• 0.1.1

NavigatorIOS

• Add NavigatorIOS and TabBarIOS

• 图⽚片

• ⼩小插曲：NavigationIOS 不会⾃自动更新

• 0.1.2

AsyncStorage

• Add AsyncStorage to save the fetched topics

• 和 LocalStorage ⼀一样，只能存储字符串

• 0.1.3

Webview

• Add WebView to show one topic

• WebView，TouchableHighlight

• 0.1.4

RefreshableListView

• Pull to refresh topics

• https://github.com/jsdf/react-native-refreshable-listview

• 0.1.6

Settings• Add eraser all topics option to Settings

• Add About view to Settings

• Error handling

• AlertIOS

• 0.2.1

Icon

• Add icon and LaunchImage for V2HOT

• 1.0.0-alpha.1

发布到 App Store

• 开发者帐号

• Beta 测试分发 — http://fir.im/

• Using offline bundle

• Running On Device

其他没有使⽤用到的技术• Flux in React Native

• Components and APIs

• Native Modules

• Custom native views and modules

• Testing

Links

• http://www.zhihu.com/question/27852694

• http://blog.cnbang.net/tech/2698/

• http://facebook.github.io/react/blog/2015/03/30/community-roundup-26.html

Q & A刘易成