Download to read offline
![• explicitní
<button
style={[
styles.base,
styles[this.props.kind],
this.props.disabled && styles.disabled
]}
>
...](https://image.slidesharecdn.com/presentation-160629105518/85/Styling-React-Native-Applications-17-320.jpg)
![Aplikace stylů na elementy
<Text style={{color: 'red'}}>Ahoj</Text>
<Text style={styles.text}>Ahoj</Text>
<View style={[styles.base, styles.background]} />
<View style={[
styles.base,
this.state.active && styles.active]}
/>](https://image.slidesharecdn.com/presentation-160629105518/85/Styling-React-Native-Applications-25-320.jpg)
![Square.react.js
import colors from '../styles/colors';
import layout from '../styles/layout';
//...
<View styles={[layout.centeredView, styles.base]} />
//...
const styles = StyleSheet.create({
base: {
backgroundColor: colors.primary,
height: 50,
width: 50
},
//... some other styles
})](https://image.slidesharecdn.com/presentation-160629105518/85/Styling-React-Native-Applications-38-320.jpg)
Uploaded byJan Maršíček
Styling React Native Applications
Slides for my talk about styling React Native applications I gave at Blueberry Meetup at Node5 on 2016/06/28 #blueberrymeetup GitHub repo: https://github.com/janmarsicek/blueberry-meetup-talk Photos from the meetup: https://flic.kr/s/aHskz7hzax Blueberry Meetup website: http://www.blueberry.cz/meetup
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://cdn.slidesharecdn.com/ss_thumbnails/l4-react-native-layout-160911060742-thumbnail.jpg?width=640&height=640&fit=bounds)
![[React Native Tutorial] Lecture 6: Component, Props, and Network](https://cdn.slidesharecdn.com/ss_thumbnails/l6-component-prop-network-160920050452-thumbnail.jpg?width=640&height=640&fit=bounds)
Styling React Native Applications
- 1. $ git commit-m "Add styles" --author="Jan Maršíček"
- 2. Kdo, co, proč? •Jan Maršíček jmarsicek@blueberryapps.com twitter.com/janmarsicek github.com/janmarsicek • stylování mobilních aplikací • nová role kodéra při vývoji mobilních aplikací
- 3. Jak se stylují mobilníaplikace?
- 4.
- 6.
- 7. Mobile development forweb developers
- 8.
- 9. From React ToReact Native in 30 minutes
- 10. From React ToReact Native in 5 minutes
- 11. Jaké to jepro kodéra?
- 12.
- 13.
- 14. CSS in JS •Locally scoped class names • CSS Modules • Aphrodite • Inline styles • Radium • React Look
- 16. Radium • Výhody • všeje v Javascriptu • styly jsou u komponenty • dynamické výpočty/state komponenty • odstraňování nepoužívaného kódu • testovatelnost vizuální stránky • explicitní
- 17. • explicitní <button style={[ styles.base, styles[this.props.kind], this.props.disabled &&styles.disabled ]} > ...
- 18. Radium • Nevýhody • pomaléhovery • server-rendering • nedostupné CSS selektory (např. div > p, div + div, :nth- child(n), :before, :after...)
- 19. Stejný způsob proweb a React Native
- 20. StyleSheet StyleSheet.create({}) const styles =StyleSheet.create({ base: { width: 38, height: 38, }, background: { backgroundColor: '#222222', }, active: { borderWidth: 2, borderColor: '#00ff00', } });
- 21. Specifika • subset vlastností •subset hodnot Packages • react-native-extended-stylesheet • react-native-css, Cairn etc.
- 22. const styles =StyleSheet.create({ background: { primary: { backgroundColor: 'green' }, secondary: { backgroundColor: 'blue' } } }); • ! style={styles.background.primary}
- 23. nepodporuje zkrácený zápis •! border: '1px solid black' • ! borderColor: 'black', borderStyle: 'solid', borderWidth: 1
- 24. nepodporuje zkrácený zápis •! boxShadow: '0 2px 5px rgba(0, 0, 0, .5)' • ! shadowOffset: {width: 0, height: 2}, shadowColor: 'black', shadowOpacity: .5, shadowRadius: 5
- 25. Aplikace stylů naelementy <Text style={{color: 'red'}}>Ahoj</Text> <Text style={styles.text}>Ahoj</Text> <View style={[styles.base, styles.background]} /> <View style={[ styles.base, this.state.active && styles.active]} />
- 26. CSS Layout • css-layout •box-sizing: border-box • position: relative • display: flex
- 27. Flexbox • nový způsobpro tvorbu layoutů pomocí CSS • intuitivní • Auto Layout
- 28. Flexbox • neúplná implementace •chybí vlastnosti a hodnoty pro změnu pořadí • order: 1 • flexDirection: 'row-reverse'
- 29. Kde se naučits flexboxem? • What The FlexBox?! (video tutorial) • Flexbox Playground (vizuální průvodce) • Flexbox Defense (interaktivní výuka) • Flexbox Froggy (interaktivní výuka) • A Complete Guide to Flexbox (referenční příručka) • Flexbox in 5 minutes (interaktivní průvodce)
- 30.
- 33. <Text /> • děděnístylů <Text style={{fontSize: 20}}> Ahoj <Text style={{color: 'blue'}}>lidi</Text> </Text>
- 34. ! " #$ % &
- 35.
- 36. <Image /> • source lokálnísoubory nebo URL • resizeMode enum('cover', 'contain', 'stretch') • přípony @2x.png, @3x.png .ios.png, .android.png
- 37. Background Image <Image resizeMode='cover' source={{uri: 'http://i.imgur.com/BdKjoDw.png'}} style={styles.wrapper} > <Textstyle={styles.beerIcon}>!</Text> <Text style={styles.text}>#blueberryMeetup</Text> <Text style={styles.sub}>2016/06/28 @ Node5</Text> </Image>
- 38. Square.react.js import colors from'../styles/colors'; import layout from '../styles/layout'; //... <View styles={[layout.centeredView, styles.base]} /> //... const styles = StyleSheet.create({ base: { backgroundColor: colors.primary, height: 50, width: 50 }, //... some other styles })
- 39. Platform specific styles •zanedbatelné rozdíly mezi iOS a Android • custom fonty • ikony aplikace
- 40.
- 41.
- 42. React Native Playground • rnplay.org •nejjednodušší způsob, jak vyzkoušet kód • pomocí QR kódu lze ukázku přenést do zařízení • Appetize.io
- 43. Jaké to bylo? •lepší pochopení toho, jak funguje React • inline styly • první PR do open source !
- 44.