How To React Native

Talk about React Native things. Mobile JS Buzz II

Transcript

1. How to React Native
2. Дмитрий Ульянов JavaScript Developer linkedin.com/in/drukas16
3. 2 проекта 10 месяцев 2-3 JS разработчика 1 нативный разработчик
4. Кто использует React Native?
5. React
6. Чем хорош React?
7. Декларативность Компонентный подход One way data flow Virtual DOM
8. React - это reconciler
9. ReactDOM - это renderer
10. React Native - тоже renderer
11. JS Native Bridge
12. JS Движок JavaScript Core. Babel под капотом и свой react-native пресет Поддержка ES6 и ES7 фич Полифиллы для ES6-ES7 методов Object, Array и String; а также для XMLHttpRequest, fetch, консоли, тайм-аутов и тд.
13. Быстрый старт
14. Create React Native App expo.io
16. Компоненты и стили
17. components/text/styles.js import { StyleSheet } from 'react-native' import * as Styles from '@styles' export default StyleSheet.create({ default: { fontSize: Styles.fontSizes.normal, fontFamily: Styles.fonts.primaryFont, color: Styles.colors.dark, }, bold: { fontWeight: ‘bold’ }, "/* other styles "*/ })
18. import { create } from ‘react-native-platform-stylesheet' export default create({ default: { fontSize: 18, ios: { fontFamily: 'Helvetica' }, android: { fontFamily: 'Roboto' } } }) components/text/styles.js, платформозависимый код
19. import { create } from ‘react-native-platform-stylesheet' export default create({ default: { fontSize: 18, ios: { fontFamily: 'Helvetica' }, android: { fontFamily: 'Roboto' } } }) components/text/styles.js, платформозависимый код
20. { "/* ""... "*/ "rnpm": { "assets": [ "fonts" ] } } Кладем свои шрифты в fonts/ и обновляем package.json $ react-native link assets
21. import styles from './styles.js' const Text = ({children, ""...props}) !=> { const { bold, color, style: styleExtension, ""...otherProps } = props const style = [ styles.default, styleExtension, bold !&& styles.bold, color !&& { color }, ] return ( <RNText {""...otherProps} style={style}> {children} "</RNText> ) } components/text/index.js, теперь со стилями
22. import styles from './styles.js' const Text = ({children, ""...props}) !=> { const { bold, color, style: styleExtension, ""...otherProps } = props const style = [ styles.default, styleExtension, bold !&& styles.bold, color !&& { color }, ] return ( <RNText {""...otherProps} style={style}> {children} "</RNText> ) } components/text/index.js, теперь со стилями
23. Использование компонента Text <View> <Text>Default text!"</Text> <Text bold>Bold text!"</Text> <Text color=“teal”> Colored text! "</Text> "</View>
24. Использование компонента Text <View> <Text>Default text!"</Text> <Text bold>Bold text!"</Text> <Text color=“teal”> Colored text! "</Text> "</View>
25. import Color from 'color' const teal = Color('teal') const gray = Color('dimgray') const darker = color !=> color.darken(0.25) const withOpacity = color !=> color.alpha(0.8) export default { dark: gray, darker: darker(gray), primary: teal, primaryWithOpacity: withOpacity(teal), } styles/colors.js, используем npm модуль color
26. Платформозависимый код const OS = Platform.OS "// 'android' or 'ios' const platform = Platform.select({ ios: 'ios', android: 'android' }) ├── filename.js "// кросплатформенный файл ├── filename.ios.js "// iOS └── filename.android.js "// Android
27. Готовые компоненты
28. NativeBase
29. • MRN • React Native Material Design • React Native Material Kit
30. Анимации
31. Animated API LayoutAnimation API class SpinningImage extends React.Component { spinValue = new Animated.Value(0) componentDidMount() { this.spin() } spin = () => { this.spinValue.setValue(0) Animated.timing(this.spinValue, { toValue: 1, duration: 2000, easing: Easing.linear, useNativeDriver: true, }).start(this.spin) } render() { const spin = this.spinValue.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) const transform = [{rotate: spin}] const style = [styles.image, {transform}] return ( <View> <Animated.Image style={style} source={myImage}/> </View> ) } } if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental(true); } class BoxWithSizeChanges extends React.Component { state = {size: 200} increaseSize = () => { LayoutAnimation.spring() // OR LayoutAnimation.configureNext(CUSTOM_CONFIG) this.setState(state => ({size: state.size + 50})) } render() { const {size} = this.state const sizes = {height: size, width: size} const style = [styles.box, sizes] return ( <View> <Box style={style}/> <Button onPress={this.increaseSize} title=‘Make him bigger!’/> </View> ) } }
32. Animated API LayoutAnimation API
33. Real World React Native Animations
34. oblador/react-native-animatable <Animatable.Text animation="slideInDown" iterationCount={5} direction="alternate"> Up and down you go </Animatable.Text> <Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={{textAlign: 'center'}}> ❤ </Animatable.Text>
35. Навигация
36. React Native решения “из коробки” NavigatorIOS Navigator NavigationExperimental
37. React Native решения “из коробки” NavigatorIOS Navigator NavigationExperimental
38. Комьюнити решения native-navigation ex-navigation react-native-navigation react-navigation react-native-redux-router react-native-router-redux react-native-route-navigator react-native-simple-router react-native-router react-native-router-flux react-router-navigation
39. react-community/react-navigation wix/react-native-navigation aksonov/react-native-router-flux
40. react-native-router-flux
41. Примеры, компоненты Router & Scene <Router> <Scene key="root"> <Scene key="home" component={Home} title="Home" "/> <Scene key="about" component={About} title="About" "/> <Scene key="wrapper" hideNavBar> {"/* Nested scenes "*/} "</Scene> "</Scene> "</Router>
42. Примеры, использование Actions <Router> <Scene key="root"> <Scene key="home" component={Home} title="Home" "/> <Scene key="about" component={About} title="About" "/> <Scene key="wrapper" hideNavBar> {"/* Nested scenes "*/} "</Scene> "</Scene> "</Router> class About extends React.Component { goHome = () "=> Actions['home']() popHome = () "=> Actions.pop() goHomeWithParams = () "=> Actions['home']({ iWillBeAvailableThroughPropsAtHome: ‘Hi there!’ }) "/* render etc "*/ }
43. Примеры, вспомогательные функции const createScene = (key, {title, ""...props}) "=> <Scene key={key} sceneStyle={{padding: 64}} renderLeftButton={() "=> <MenuToggle "/>} title={(title "|| key).toUpperCase()} {""...props} "/> const Scenes = ( <Scene key="drawer" component={Drawer}> <Scene key="wrapper"> {createScene('home', {component: Home, initial: true})} {createScene('about', {component: About})} {createScene('logout', {component: Logout, title: 'Log Out'})} "</Scene> "</Scene> )
44. Примеры, Drawer import Drawer from 'react-native-drawer' import { DefaultRenderer, Keyboard } from 'react-native-router-flux' "/* Drawer render "*/ const {navigationState, onNavigate} = props return ( <Drawer {""...drawerProps} open={navigationState.isOpen} content={<WrappedComponent "/>} onOpenStart={Keyboard.dismissKeyboard}> <DefaultRenderer onNavigate={onNavigate} navigationState={navigationState.children[0]} "/> "</Drawer> )
45. Примеры, Sub-scenes const ProfileScenes = ( <Scene key="profile" component={Profile} title="My Profile"> <Scene key="profile/view" "/> <Scene key="profile/edit" editMode rightTitle="Save" onRight={saveProfile} leftTitle="Cancel" onLeft={backToViewMode} "/> <Scene key="profile/save" save "/> "</Scene> ) Примеры, Switch <Scene key="root" tabs={true} unmountScenes component={connect(state "=> ({session: getSession(state)}))(Switch)} selector={props "=> props.session ? 'main' : 'unauthorized'} > <Scene key="unauthorized" component={Unauthorized} "/> <Scene key="main" component={Main} "/> "</Scene>
46. react-navigation
47. Примеры, StackNavigator StackNavigator({ Home: { screen: HomeScreen, navigationOptions: ({navigation}) "=> ({ title: 'Home', headerRight: <Button onClick={navigation.navigate('somewhere')} "/>, header: <CustomHeader "/> "/* other screen props "*/ }) }, About, "/* other screens "*/ }, { headerMode: 'float', initialRouteName: 'Home' "/* other StackNavigator props "*/ })
48. Примеры, TabNavigator TabNavigator({ Home: { screen: HomeScreen, navigationOptions: ({navigation}) "=> ({ tabBarLabel: 'Home', tabBarIcon: ({tintColor}) "=> <Icon tint={tintColor}"/> }) }, Feed, "/* other tabs "*/ }, { tabBarComponent: TabBarBottom, tabBarOptions: { activeTintColor: 'teal', "/* other tabBar props "*/ }, "/* other TabNavigator props "*/ })
49. Примеры, DrawerNavigator DrawerNavigator({ Home: { screen: HomeScreen, navigationOptions: ({navigation}) "=> ({ drawerLabel: 'Home', drawerIcon: ({tintColor}) "=> <Icon tint={tintColor}"/> }) }, Profile, "/* other tabs "*/ }, { activeTintColor: 'teal', contentComponent: props "=> <ScrollView><DrawerItems {""...props} "/>"</ScrollView> "/* other DrawerNavigator props "*/ })
50. Примеры, nested navigators StackNavigator({ Tabs: { screen: TabNavigator({ "/* tabs "*/ }) }, Stack: { screen: StackNavigator({ "/* screens "*/ }) } })
51. Примеры, screen props this.props.navigation = { dispatch, goBack, navigate, "/* few more "*/ } NavigationActions NavigationActions.navigate({ routeName: 'Profile', actions: [ NavigationActions.navigate({ routeName: 'Friends', }) ] })
52. Работа с данными
53. Redux
54. Getting Started with Redux Building React Applications with Idiomatic Redux
55. Набор джентльмена redux && react-redux redux-logger / redux-devtools ducks modular structure redux-actions reselect redux-saga redux-persist
56. erikras/ducks-modular-redux import { createAction, handleActions } from 'redux-actions' import { moduleName } from './config' // moduleName = 'todosModule' const initialState = {todos: []} // MAY export action type, if it should be accessible // in other parts of the app (e.g. redux-saga or other module) const TODO_ADD = `${moduleName}/TODO_ADD` // MUST export creators export const addTodo = createAction(TODO_ADD) // MUST export reducer as default export default handleActions({ [TODO_ADD]: (state, {payload}) => ({todos: […state, payload]}) }, initialState); // selectors, sagas, epics etc. MAY also be named export redux/modules/todos/index.js
57. import { createSelector } from 'reselect' import { moduleName } from ‘./config' export const getTodos = state => state[moduleName].todos export const getVisibilityFilter = state => state[moduleName].filter export const getVisibleTodos = createSelector( [getTodos, getVisibilityFilter], (todos, visibilityFilter) => { switch (filter) { case 'SHOW_ALL': return todos case 'SHOW_COMPLETED': return todos.filter(todo => todo.completed) case 'SHOW_ACTIVE': return todos.filter(todo => !todo.completed) } } ) // todoList.js | import * as todosSelectors from '@modules/todos/selectors' redux/modules/todos/selectors.js reactjs/reselect
58. redux-thunk redux-loop redux-observable 5,402 1,214 2,992 8,129 Сайд-эффекты в Redux redux-saga
59. Redux-Thunk const a = <div onClick={ () => dispatch(actions.loadUser(userId)) }>{username}</div> export const loadUser = userId => async dispatch => { try { const user = await userService.load(userId) dispatch(userLoaded(user)) } catch (err) { dispatch(userLoadFailed(err)) } } const a = <div onClick={ () => dispatch(actions.userNameClicked(userId)) }>{username}</div> function * watchUserNameClickAndLoad () { yield * takeLatest(USER_NAME_CLICKED, loadUser) } function * loadUser ({payload}) { try { const user = yield call(userService.load, payload) yield put(userLoaded(user)) } catch (err) { yield put(userLoadFailed(err)) } }
60. Императивный flow + Декларативные сайд-эффекты + Мощь генераторов + Огромное кол-во хелперов
61. Хелперы / Эффекты • take (watcher) • takeLatest (cancels previous) • takeEvery • call (blocking) • fork (non-blocking) • put (saga dispatch) • select (saga mapState) • delay • cancel • race && all (like in Promises) etc.
62. redux-saga: login flow example function * authorization () { // Check the storage for cached token and profile let [token, profile] = yield [ call(auth.getToken), call(auth.getProfile), ] // so now user may be logged in... }
63. redux-saga: login flow example // ...or may not, so we gonna wait for it if (!token) { const {payload: credentials} = yield take(profileActions.SIGN_IN) const {response, error} = yield call(authRequest, credentials) if (error) { yield put(profileActions.signInFailed(error)) continue } token = response.token profile = response.profile yield [ call(auth.setToken, token), call(auth.setProfile, profile), ] }
64. redux-saga: login flow example // Now when we have token and profile // We can let user in yield put(profileActions.signInSuccess({token, profile})) yield take(profileActions.SIGN_OUT) token = profile = null yield [ call(auth.removeToken), call(auth.removeProfile), ] yield put(stackActions.clear()) yield put(profileActions.signOutSuccess())
65. redux-saga: login flow example function * authorization () { // Check the storage for cached token and profile let [token, profile] = yield [call(auth.getToken), call(auth.getProfile)] while (true) { if (!token) {…} /* Receive token and profile data */ yield put(profileActions.signInSuccess({token, profile})) yield take(profileActions.SIGN_OUT) /* Other signOut stuff */ } }
66. Ignite
67. https://infinite.red/ignite
68. Заходите на Medium
69. Twitter @reactjs @reactnative @dan_abramov @Vjeux @JI @grabbou @tylermcginnis33 @koltal
70. По максимуму используйте PropTypes и DefaultProps Для клавиатуры используйте KeyboardAvoidingView Внимательно изучайте документацию Не пренебрегайте селекторами Найдите в себе силы разобраться с Redux-Saga - не пожалеете Не забывайте убивать console.log, когда льете в прод И конечно же пишите на React Native - он крутой inline-советы напоследок
71. Вопросы? linkedin.com/in/drukas16