React Native & V2HOT
Transcript of React Native & V2HOT
![Page 1: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/1.jpg)
React Native & V2HOT刘易成
![Page 3: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/3.jpg)
内容概要
• React Native 简单介绍
• 以⼀一个前端的视⾓角,使⽤用 React Native 完整的开发⼀一个应⽤用 V2HOT
![Page 4: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/4.jpg)
React Native 是什么
• 使⽤用 JavaScript 和 React 开发原⽣生(native )应⽤用
• Write once, run anywhere
• Learn once, write anywhere
![Page 5: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/5.jpg)
![Page 6: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/6.jpg)
React Native 的特点• Native iOS Components
• Asynchronous Execution
• Touch Handling
• Flexbox and Styling — css的⼦子集
• Polyfills
• Extensibility
![Page 7: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/7.jpg)
React Native 的现状
• 在⽣生产环境有⼀一定⻛风险
• Facebook有3款App(Groups、Ads Manager、F8)使⽤用了React Native
• 社区活跃,https://react.parts/native-ios 有 100+ 个组件(react-web 有 800+ 个)
![Page 8: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/8.jpg)
React Native 的未来
• React Native for Android
• October
• http://facebook.github.io/react/blog/2015/03/30/community-roundup-26.html
![Page 9: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/9.jpg)
V2HOT 开发实践
• 准备
• OS X,XCode,Homebrew,node,watchman,flow,npm,react-native-cli
• https://github.com/xcatliu/V2HOT
![Page 10: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/10.jpg)
Hello World
• XCode,Debugging
• View,Text
• Styling — Flexbox,StyleSheet
• 0.1.0
![Page 11: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/11.jpg)
List View
• Fetching and rendering v2ex hot topics
• ListView,Image
• ⼩小插曲:报错升级到 0.4.1 解决
• 0.1.1
![Page 12: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/12.jpg)
NavigatorIOS
• Add NavigatorIOS and TabBarIOS
• 图⽚片
• ⼩小插曲:NavigationIOS 不会⾃自动更新
• 0.1.2
![Page 13: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/13.jpg)
AsyncStorage
• Add AsyncStorage to save the fetched topics
• 和 LocalStorage ⼀一样,只能存储字符串
• 0.1.3
![Page 14: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/14.jpg)
Webview
• Add WebView to show one topic
• WebView,TouchableHighlight
• 0.1.4
![Page 15: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/15.jpg)
RefreshableListView
• Pull to refresh topics
• https://github.com/jsdf/react-native-refreshable-listview
• 0.1.6
![Page 16: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/16.jpg)
Settings• Add eraser all topics option to Settings
• Add About view to Settings
• Error handling
• AlertIOS
• 0.2.1
![Page 17: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/17.jpg)
Icon
• Add icon and LaunchImage for V2HOT
• 1.0.0-alpha.1
![Page 18: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/18.jpg)
发布到 App Store
• 开发者帐号
• Beta 测试分发 — http://fir.im/
• Using offline bundle
• Running On Device
![Page 19: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/19.jpg)
其他没有使⽤用到的技术• Flux in React Native
• Components and APIs
• Native Modules
• Custom native views and modules
• Testing
![Page 20: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/20.jpg)
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
![Page 21: React Native & V2HOT](https://reader034.fdocuments.net/reader034/viewer/2022042507/58f2b6821a28abed498b45f7/html5/thumbnails/21.jpg)
Q & A刘易成