Upload
xcat-liu
View
619
Download
3
Embed Size (px)
Citation preview
React Native & 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刘易成