React Nativemeetup #6
Eugene Potapenko
• Что такое React Native
• React Native vs Cordova
• React Native vs Native Development
• Как создавать проект
• Компоненты
• API
• Нативный код - коммуникация
• State как его делать и как его хранить
• RN Библиотеки которые мне понравились
Оглавление:
Cordova vs Native Development
Cordova vs React Native
React Native vs Native Development
Что такое React Native?
Фреймворк для разработки мобильных приложений
Имеет преимущества как гибридной так и нативной разработки
React Components для создания мобильного приложения
Shadow DOM для конфигурации нативных компонентов
React.JS “Верстка”
CSS стили
Flex Layout
{ flex: 1, flexDirection: “row” }
Инсталяция создание проекта
Создание собственных компонентов на JavaScript
Используя как “кирпичики” нативные компоненты
Ре-использование кода - до 80%IOS/Android mobile, Android TV, AppleTV, MacOS Apps
• $ brew install node
• $ npm install react-native
• $ react native init
Обзор компонентов
ActivityIndicatorIOSDatePickerIOSDrawerLayoutAndroidImageListViewMapViewModalNavigatorNavigatorIOSPickerIOSPickerProgressBarAndroidProgressViewIOSPullToRefreshViewAndroidRefreshControlScrollViewSegmentedControlIOS
SliderIOSStatusBarSwitchTabBarIOSTabBarIOS.ItemTextTextInputToolbarAndroidTouchableHighlightTouchableNativeFeedbackTouchableOpacityTouchableWithoutFeedbackViewViewPagerAndroidWebView
Components:
ActivityIndicatorIOSDatePickerIOSDrawerLayoutAndroidImageListViewMapViewModalNavigatorNavigatorIOSPickerIOSPickerProgressBarAndroidProgressViewIOSPullToRefreshViewAndroidRefreshControlScrollViewSegmentedControlIOS
SliderIOSStatusBarSwitchTabBarIOSTabBarIOS.ItemTextTextInputToolbarAndroidTouchableHighlightTouchableNativeFeedbackTouchableOpacityTouchableWithoutFeedbackViewViewPagerAndroidWebView
Components:
ViewListView
ScrollViewTouchableHighlight
TextImage
NavigatorTabBar
TextInput
DivDiv (offset x-vertical)
ButtonSpanImgHistory API+StackStackInput
Особенности мобильного UX
99.99%
0.01%
99.99%
0.01%
Вертикальное видео неизбежное зло…
♔ Navigator
ActionSheetIOSAlertAlertIOSAnimatedAppRegistryAppStateIOSAppStateAsyncStorageBackAndroidCameraRollDimensionsIntentAndroid
InteractionManagerLayoutAnimationLinkingLinkingIOSNativeMethodsMixinNetInfoPanResponderPixelRatioPushNotificationIOSStatusBarIOSStyleSheetToastAndroidVibrationIOS
API
Энди Матушаку (Andy Matuschak) разработчик IOS UIkit, (v 4.1 - 4.8)
«Как автор UIkit, с уверенностью могу сказать: для UI-слоя React-модель намного
лучше, чем модель UIkit. React Native – отличная штука!».
Top Related