react native (metup#6)

React Nativemeetup #6

Eugene Potapenko

playphrase.me

localplace.me (в разработке)

проекты

http://playphrase.me

http://localplace.me

eugene.john.potapenko@gmail.com @potapenko

@potapenko.ru

контакты

• Что такое 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:

https://facebook.github.io/react-native/docs/activityindicatorios.html#content

https://facebook.github.io/react-native/docs/datepickerios.html#content

https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#content

https://facebook.github.io/react-native/docs/image.html#content

https://facebook.github.io/react-native/docs/listview.html#content

https://facebook.github.io/react-native/docs/mapview.html#content

https://facebook.github.io/react-native/docs/modal.html#content

https://facebook.github.io/react-native/docs/navigator.html#content

https://facebook.github.io/react-native/docs/navigatorios.html#content

https://facebook.github.io/react-native/docs/pickerios.html#content

https://facebook.github.io/react-native/docs/picker.html#content

https://facebook.github.io/react-native/docs/progressbarandroid.html#content

https://facebook.github.io/react-native/docs/progressviewios.html#content

https://facebook.github.io/react-native/docs/pulltorefreshviewandroid.html#content

https://facebook.github.io/react-native/docs/refreshcontrol.html#content

https://facebook.github.io/react-native/docs/scrollview.html#content

https://facebook.github.io/react-native/docs/segmentedcontrolios.html#content

https://facebook.github.io/react-native/docs/sliderios.html#content

https://facebook.github.io/react-native/docs/statusbar.html#content

https://facebook.github.io/react-native/docs/switch.html#content

https://facebook.github.io/react-native/docs/tabbarios.html#content

https://facebook.github.io/react-native/docs/tabbarios-item.html#content

https://facebook.github.io/react-native/docs/text.html#content

https://facebook.github.io/react-native/docs/textinput.html#content

https://facebook.github.io/react-native/docs/toolbarandroid.html#content

https://facebook.github.io/react-native/docs/touchablehighlight.html#content

https://facebook.github.io/react-native/docs/touchablenativefeedback.html#content

https://facebook.github.io/react-native/docs/touchableopacity.html#content

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#content

https://facebook.github.io/react-native/docs/view.html#content

https://facebook.github.io/react-native/docs/viewpagerandroid.html#content

https://facebook.github.io/react-native/docs/webview.html#content

ActivityIndicatorIOSDatePickerIOSDrawerLayoutAndroidImageListViewMapViewModalNavigatorNavigatorIOSPickerIOSPickerProgressBarAndroidProgressViewIOSPullToRefreshViewAndroidRefreshControlScrollViewSegmentedControlIOS

SliderIOSStatusBarSwitchTabBarIOSTabBarIOS.ItemTextTextInputToolbarAndroidTouchableHighlightTouchableNativeFeedbackTouchableOpacityTouchableWithoutFeedbackViewViewPagerAndroidWebView

Components:

https://facebook.github.io/react-native/docs/activityindicatorios.html#content

https://facebook.github.io/react-native/docs/datepickerios.html#content

https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#content

https://facebook.github.io/react-native/docs/image.html#content

https://facebook.github.io/react-native/docs/mapview.html#content

https://facebook.github.io/react-native/docs/modal.html#content

https://facebook.github.io/react-native/docs/navigatorios.html#content

https://facebook.github.io/react-native/docs/pickerios.html#content

https://facebook.github.io/react-native/docs/picker.html#content

https://facebook.github.io/react-native/docs/progressbarandroid.html#content

https://facebook.github.io/react-native/docs/progressviewios.html#content

https://facebook.github.io/react-native/docs/pulltorefreshviewandroid.html#content

https://facebook.github.io/react-native/docs/refreshcontrol.html#content

https://facebook.github.io/react-native/docs/segmentedcontrolios.html#content

https://facebook.github.io/react-native/docs/sliderios.html#content

https://facebook.github.io/react-native/docs/statusbar.html#content

https://facebook.github.io/react-native/docs/switch.html#content

https://facebook.github.io/react-native/docs/tabbarios.html#content

https://facebook.github.io/react-native/docs/tabbarios-item.html#content

https://facebook.github.io/react-native/docs/text.html#content

https://facebook.github.io/react-native/docs/toolbarandroid.html#content

https://facebook.github.io/react-native/docs/touchablenativefeedback.html#content

https://facebook.github.io/react-native/docs/touchableopacity.html#content

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#content

https://facebook.github.io/react-native/docs/viewpagerandroid.html#content

https://facebook.github.io/react-native/docs/webview.html#content

ViewListView

ScrollViewTouchableHighlight

TextImage

NavigatorTabBar

TextInput

DivDiv (offset x-vertical)

ButtonSpanImgHistory API+StackStackInput

Особенности мобильного UX

99.99%

0.01%

99.99%

0.01%

Вертикальное видео неизбежное зло…

View

ScrollView

ListView

♔ ListView

♔ Navigator

ActionSheetIOSAlertAlertIOSAnimatedAppRegistryAppStateIOSAppStateAsyncStorageBackAndroidCameraRollDimensionsIntentAndroid

InteractionManagerLayoutAnimationLinkingLinkingIOSNativeMethodsMixinNetInfoPanResponderPixelRatioPushNotificationIOSStatusBarIOSStyleSheetToastAndroidVibrationIOS

API

https://facebook.github.io/react-native/docs/actionsheetios.html#content

https://facebook.github.io/react-native/docs/alert.html#content

https://facebook.github.io/react-native/docs/alertios.html#content

https://facebook.github.io/react-native/docs/animated.html#content

https://facebook.github.io/react-native/docs/appregistry.html#content

https://facebook.github.io/react-native/docs/appstateios.html#content

https://facebook.github.io/react-native/docs/appstate.html#content

https://facebook.github.io/react-native/docs/asyncstorage.html#content

https://facebook.github.io/react-native/docs/backandroid.html#content

https://facebook.github.io/react-native/docs/cameraroll.html#content

https://facebook.github.io/react-native/docs/dimensions.html#content