Успешный кейс использования react native в продакшне,...
TRANSCRIPT
React Native
/eugene.feudorov
React Native TableView Objective-C vs React Native LOOKBUCK , , tools, . iOS 80% Android
(objective-c, swift, java) / (React Native, Xamarin, RubyMotion, etc.)Web View (PhoneGap, Ionic, etc.)
Learn once, write anywhere
React Native
: Node React-native-cli Xcode 7.0 ( iOS) Android Studio 2.0 ( Android) : Text EditorNuclide IDEDeco IDEChrome (DevTools)
DECO IDE
$ react-native init BigApp
$ react-native run-ios$ react-native run-android : React Native: :
JSON Spinner ( ) TableView
JSON Spinner TableView
JSON Objective-CReact Native
1/3
Spinner ( )Objective-CReact Native
2/3
TableViewObjective-CReact Native
3/3
UI
UI
UI
UI
UI
UI
UI
TabBar
~/dev/lookbuck_app/index.ios.js
NavigationBar
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js
~/dev/lookbuck_app/FeedNavPage.ios.js
~/dev/lookbuck_app/index.ios.js
Scrollable Tabs
~/dev/lookbuck_app/FeedPage.js
~/dev/lookbuck_app/IndexTabBar.js
FeedView ( )
~/dev/lookbuck_app/FeedItemsView.js
(JSON)
~/dev/lookbuck_app/FeedItemsView.js
~/dev/lookbuck_app/FeedItemsView.js
~/dev/lookbuck_app/FeedItemsView.js
1. render()
2.
2. render()1.
Tools
Call StackBreakpointsPerfomance MonitorProfiler (CPU / Mem)InspectorLive Reload
Call Stack
Breakpoints
Perfomance Monitor
CPU Profiler
Inspector
Live Reload
Unit-
Unit-$ npm install --save-dev jest-cli JEST: :$ mkdir __tests__
::$ npm test
Cucumber.ioCalabash (calaba.sh)
Snapshot
Snapshot (Fastlane)Xcode 7.0 ( )
, https://js.coach/react-native
3. , StatusBarIOS, ActivityIndicatorIOS, ToolbarAndroid, 2. , . iOS Android4. UI-, Bridge (Javascript Objective-C | Swift | Java)
1. OS:Android 4.1 (API 16) +iOS 7+
iOS-, 80 90% Android
TabBar TabBarIOS
Android 1/3
Android 2/3
Navigator NavigatorIOS
Navigator .
Android 3/3
iOS, IndexPage.ios.js
Import Android, IndexPage.android.js
, IndexPage.js
OS,
JS- nodejs frontend Moment.jsUnderscore.jsURI.js
iOS ( 2 App Store) Objective-C JAVA ( )
React Native