44
React Native meetup #6 Eugene Potapenko

React Native (Metup#6)

Embed Size (px)

Citation preview

Page 1: React Native (Metup#6)

React Nativemeetup #6

Eugene Potapenko

Page 2: React Native (Metup#6)

playphrase.me

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

проекты

http://playphrase.me
http://localplace.me
Page 3: React Native (Metup#6)

[email protected] @potapenko

@potapenko.ru

контакты

Page 4: React Native (Metup#6)

• Что такое React Native

• React Native vs Cordova

• React Native vs Native Development

• Как создавать проект

• Компоненты

• API

• Нативный код - коммуникация

• State как его делать и как его хранить

• RN Библиотеки которые мне понравились

Оглавление:

Page 5: React Native (Metup#6)

Cordova vs Native Development

Page 6: React Native (Metup#6)

Cordova vs React Native

Page 7: React Native (Metup#6)

React Native vs Native Development

Page 8: React Native (Metup#6)

Что такое React Native?

Page 9: React Native (Metup#6)

Фреймворк для разработки мобильных приложений

Page 10: React Native (Metup#6)

Имеет преимущества как гибридной так и нативной разработки

Page 11: React Native (Metup#6)

React Components для создания мобильного приложения

Page 12: React Native (Metup#6)

Shadow DOM для конфигурации нативных компонентов

Page 13: React Native (Metup#6)

React.JS “Верстка”

Page 14: React Native (Metup#6)
Page 15: React Native (Metup#6)

CSS стили

Page 16: React Native (Metup#6)
Page 17: React Native (Metup#6)

Flex Layout

Page 18: React Native (Metup#6)

{ flex: 1, flexDirection: “row” }

Page 19: React Native (Metup#6)

Инсталяция создание проекта

Page 20: React Native (Metup#6)

Создание собственных компонентов на JavaScript

Используя как “кирпичики” нативные компоненты

Page 21: React Native (Metup#6)
Page 22: React Native (Metup#6)

Ре-использование кода - до 80%IOS/Android mobile, Android TV, AppleTV, MacOS Apps

Page 23: React Native (Metup#6)

• $ brew install node

• $ npm install react-native

• $ react native init

Page 24: React Native (Metup#6)
Page 25: React Native (Metup#6)
Page 26: React Native (Metup#6)
Page 27: React Native (Metup#6)
Page 28: React Native (Metup#6)

Обзор компонентов

Page 29: React Native (Metup#6)

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
Page 30: React Native (Metup#6)

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
Page 31: React Native (Metup#6)

ViewListView

ScrollViewTouchableHighlight

TextImage

NavigatorTabBar

TextInput

DivDiv (offset x-vertical)

ButtonSpanImgHistory API+StackStackInput

https://facebook.github.io/react-native/docs/view.html#content
https://facebook.github.io/react-native/docs/listview.html#content
https://facebook.github.io/react-native/docs/scrollview.html#content
https://facebook.github.io/react-native/docs/touchablehighlight.html#content
https://facebook.github.io/react-native/docs/navigator.html#content
https://facebook.github.io/react-native/docs/textinput.html#content
Page 32: React Native (Metup#6)

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

Page 33: React Native (Metup#6)

99.99%

0.01%

Page 34: React Native (Metup#6)

99.99%

0.01%

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

Page 35: React Native (Metup#6)
Page 36: React Native (Metup#6)

View

ScrollView

ListView

https://facebook.github.io/react-native/docs/listview.html#content
Page 37: React Native (Metup#6)

♔ ListView

https://facebook.github.io/react-native/docs/listview.html#content
Page 38: React Native (Metup#6)

♔ Navigator

Page 39: React Native (Metup#6)
Page 40: React Native (Metup#6)
Page 41: React Native (Metup#6)
Page 42: React Native (Metup#6)

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
https://facebook.github.io/react-native/docs/intentandroid.html#content
https://facebook.github.io/react-native/docs/interactionmanager.html#content
https://facebook.github.io/react-native/docs/layoutanimation.html#content
https://facebook.github.io/react-native/docs/linking.html#content
https://facebook.github.io/react-native/docs/linkingios.html#content
https://facebook.github.io/react-native/docs/nativemethodsmixin.html#content
https://facebook.github.io/react-native/docs/netinfo.html#content
https://facebook.github.io/react-native/docs/panresponder.html#content
https://facebook.github.io/react-native/docs/pixelratio.html#content
https://facebook.github.io/react-native/docs/pushnotificationios.html#content
https://facebook.github.io/react-native/docs/statusbarios.html#content
https://facebook.github.io/react-native/docs/stylesheet.html#content
https://facebook.github.io/react-native/docs/toastandroid.html#content
https://facebook.github.io/react-native/docs/vibrationios.html#content
Page 43: React Native (Metup#6)

Энди Матушаку (Andy Matuschak) разработчик IOS UIkit, (v 4.1 - 4.8)

«Как автор UIkit, с уверенностью могу сказать: для UI-слоя React-модель намного

лучше, чем модель UIkit. React Native – отличная штука!».

Page 44: React Native (Metup#6)

[email protected] @potapenko

@potapenko.ru

контакты


React Native

React Native

Mobile
desenvolvidas em React Native - arxiv.org

desenvolvidas em React Native - arxiv.org

Documents
MOBILNA APLIKACIJA ZA ŠAH NA REACT-NATIVE PLATFORMI · Zadatak diplomskog rada je Mobilna aplikacija za šah na React-Native platformi. Ideja je da se krajnjem korisniku dostavi

MOBILNA APLIKACIJA ZA ŠAH NA REACT-NATIVE PLATFORMI · Zadatak diplomskog rada je Mobilna aplikacija za šah na React-Native platformi. Ideja je da se krajnjem korisniku dostavi

Documents
React native Guides 보기전에

React native Guides 보기전에

Software
Kehadiran Pegawai Menggunakan React Native Framework

Kehadiran Pegawai Menggunakan React Native Framework

Documents
REACT NATIVE - HWSW · REACT NATIVE Mi is ez? Framework Android és iOS alkalmazások fejlesztéséhez A React koncepció, mobilos környezetbe ültetve “Learn once, write anywhere”

REACT NATIVE - HWSW · REACT NATIVE Mi is ez? Framework Android és iOS alkalmazások fejlesztéséhez A React koncepció, mobilos környezetbe ültetve “Learn once, write anywhere”

Documents
Introdução ao React Native · Introdução ao React Native Antonio Lopes Jr React Native, 1ª Versão Sem Revisão

Introdução ao React Native · Introdução ao React Native Antonio Lopes Jr React Native, 1ª Versão Sem Revisão

Documents
Wir realisieren digitale Innovation · 2020-03-03 · • React • Ionic • Framework 7 Mobile Frameworks • Cordova • React Native • Native Script CMS • Wordpress • Typo3

Wir realisieren digitale Innovation · 2020-03-03 · • React • Ionic • Framework 7 Mobile Frameworks • Cordova • React Native • Native Script CMS • Wordpress • Typo3

Documents
React native redux_sharing

React native redux_sharing

Software
React Native 入門

React Native 入門

Engineering
React Native kehittäjän arkea - COnnecting REpositories · React.js Essentials esittelee React.js ohjelmointikirjaston ratkaisuna tähän ongelmaan. 2. Learning React Native, Bonnie

React Native kehittäjän arkea - COnnecting REpositories · React.js Essentials esittelee React.js ohjelmointikirjaston ratkaisuna tähän ongelmaan. 2. Learning React Native, Bonnie

Documents
Styling React Native Applications

Styling React Native Applications

Technology
React Native in Production

React Native in Production

Technology
JSDC 2015 React-Native 實戰

JSDC 2015 React-Native 實戰

Software
Introduzione a React Native - Alessandro Giannini

Introduzione a React Native - Alessandro Giannini

Software
W3CTech美团react专场-React Native 初探

W3CTech美团react专场-React Native 初探

Engineering
React - static.fnac-static.com · avec React Native 1. Présentation de React Native Développer pour le mobile avec React Native À présent que nous avons vu les bases de React

React - static.fnac-static.com · avec React Native 1. Présentation de React Native Développer pour le mobile avec React Native À présent que nous avons vu les bases de React

Documents
3- الفرق بين Ionic - Ionic Vs React Native

3- الفرق بين Ionic - Ionic Vs React Native

Education
React, Flux y React native

React, Flux y React native

Technology
CV Tristan Touchaintristan-touchain.me tristantouchain DÉVELOPPEUR FRONT-END En route vers le FullStack REACT REACT NATIVE GRAPHQL TYPESCRIPT APOLLO REACT NATIVE AXIOS REACT AXIOS

CV Tristan Touchaintristan-touchain.me tristantouchain DÉVELOPPEUR FRONT-END En route vers le FullStack REACT REACT NATIVE GRAPHQL TYPESCRIPT APOLLO REACT NATIVE AXIOS REACT AXIOS

Documents
React native実践談

React native実践談

Technology
PERFORMANCE COMPARISON BETWEEN REACT NATIVE …umu.diva-portal.org/smash/get/diva2:1349917/FULLTEXT01.pdfand React Native. ‚e purpose of these applications is to stress test the

PERFORMANCE COMPARISON BETWEEN REACT NATIVE …umu.diva-portal.org/smash/get/diva2:1349917/FULLTEXT01.pdfand React Native. ‚e purpose of these applications is to stress test the

Documents
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"

Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"

Business
UO257157 ReACT-Native UO258302 UO68216

UO257157 ReACT-Native UO258302 UO68216

Documents
React Native + Redux

React Native + Redux

Technology
React Native & V2HOT

React Native & V2HOT

Software
Realidade aumentada com react native e ARKit

Realidade aumentada com react native e ARKit

Technology
iOS App 개발 with React Native + ClojureScript

iOS App 개발 with React Native + ClojureScript

Software
Beginning react native

Beginning react native

Engineering
PROJET MOBILE AVEC REACT NATIVE - Enjeux Marketing

PROJET MOBILE AVEC REACT NATIVE - Enjeux Marketing

Documents