Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Kobkrit Viriyayudhakorn, Ph.D.
CEO of iApp Technology Limited.
kobkrit@gmail.com
All source code
• https://github.com/kobkrit/react-native-class-2017
Download Exercise
• https://github.com/kobkrit/react-native-class-2017/
raw/master/exercise/L4.zip
Prepare ENV for making Android App by

React-Native on Windows
• See https://kobkrit.com/react-native-tutorial-react-
nati...
Prepare ENV for making Android App by

React-Native on Mac
• https://kobkrit.com/react-native-tutorial-set-up-
react-nativ...
Setup Project (15 min)
• Enter to your coding directory (Maybe ~/code, or c:code, but not
c:windowssystem32)
• (Both) $ re...
• Set up the Screen like this.
• Enable Hot Reloading
• Open Developer Menu by Command-D on Mac

or Menu Button in Android...
Structure
JSX
• JSX is a JavaScript syntax extension that looks
similar to XML.
• We use a JSX to write User Interface (UI).
• JSX u...
index.ios.js

index.android.js
JSX Syntax
<Text>Hello World!</Text>
<Image
style={{height:100, width:100}}
source={{uri: 'https://facebook.github.io/reac...
Attribute Value
• Using JavaScript Expression as Attribute Value,
Use { }
• Using String as Attribute Value, Use ''
Putting JS Logic in JSX
• Using JavaScript Statements, Put it between { }
Comment
• To comment in JSX, Put it between {/* */}, {// … n 

}
One Outmost Parent Tag Rules
OK! 

Only one outmost parent tags: View
BAD! 

Multiple outmost parent tags: Text,Text
Basic Elements
<Text>Hello World!</Text>
iOS Android
<Image
style={{height:100, width:100}}
source={{uri: 'https://faceboo...
Basic Elements
<TextInput
style={{height:40, borderColor:

'gray', borderWidth: 1}}
value='Useless TextInput’
/>
iOS
Andro...
Basic Elements
<TouchableOpacity onPress={()=>{}}
style={{borderColor:'#f00',
backgroundColor:'#faa', borderWidth:
1, padd...
JSX’s Example
Style
Basic CSS
View: Blue Box
80
80
80
8040
40
40
40
Margin
Padding
BorderRadius
20
Width: 200
Height: 200
View: Red Box+ Text
Flex:1
40
Exercise I (5 min)
More CSS for View
More CSS for Text
Flexbox Layout
• Flexbox => CSS Flexible Box Layout (in W3C Last Call
Working Draft)
• Providing efficient way to layout, a...
• main axis - Primary axis of a flex container, 

defined by flexDirection.
• main-start | main-end — Flex items placed withi...
Above is flexDirection = row (horizontal)
• cross axis - Secondary axis that perpendicular to the 

primary axis (opposed w...
Two types of Flex properties
Containers
• flexDirection
• justifyContent
• alignItems
• flexWrap
Items
• flex
• alignSelf
Containers
• flexDirection
• justifyContent
• alignItems
• flexWrap
FlexDirection
Horizontally

flexDirection: row;
Vertically

flexDirection: column;
(Container)
Default flexDirection in React Native is column
Justify Content
• Adding justifyContent to a
component's style determines
the distribution of children
along the primary a...
Align Items
• Adding alignItems to a
component's style determines
the alignment of children along
the secondary axis (if t...
FlexWrap
• By default, flex items will all try
to fit onto one line.
• Adding FlexWrap, You can
change that and allow the
it...
Items
• flex
• alignSelf
Flex
• “Flex” CSS syntax applied to item elements to tell how much they can
stretches inside their container by compares w...
Align Self
• Adding alignSelf to a component's style determines the alignment of itself
along the secondary axis (overwrit...
Colors
• '#f0f' (#rgb)
• '#f0fc' (#rgba)
• '#ff00ff' (#rrggbb)
• '#ff00ff00' (#rrggbbaa)
• 'rgb(255, 255, 255)'
• 'rgba(25...
More Colors…
https://facebook.github.io/react-native/docs/colors.html
Exercise II (10 min)
Exercise III (15 min)
Exercise IV (15 min)
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
Prochain SlideShare
Chargement dans…5
×

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox

8 134 vues

Publié le

Learn Basic Elements of React-Native and UI Layout by using CSS Library called FlexBox.

Publié dans : Logiciels

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox

  1. 1. Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited. kobkrit@gmail.com
  2. 2. All source code • https://github.com/kobkrit/react-native-class-2017
  3. 3. Download Exercise • https://github.com/kobkrit/react-native-class-2017/ raw/master/exercise/L4.zip
  4. 4. Prepare ENV for making Android App by
 React-Native on Windows • See https://kobkrit.com/react-native-tutorial-react- native-setup-on-windows-for-android-development- walkthrough-a463e825159d#.joucl9xkg
  5. 5. Prepare ENV for making Android App by
 React-Native on Mac • https://kobkrit.com/react-native-tutorial-set-up- react-native-on-mac-for-ios-and-android- development-78a30a26aa3b#.cn29imr81
  6. 6. Setup Project (15 min) • Enter to your coding directory (Maybe ~/code, or c:code, but not c:windowssystem32) • (Both) $ react-native init flexbox
 (Both) $ cd flexbox • Open index.ios.js current directory with your IDE
 (Mac) $ atom index.ios.js
 (Win) > notepad index.android.js • (Win) Run your android emulator (e.g. Genymotion) • (Mac) $ react-native run-ios
 (Win) > react-native run-android
  7. 7. • Set up the Screen like this. • Enable Hot Reloading • Open Developer Menu by Command-D on Mac
 or Menu Button in Android Simulator (for 
 Windows) • Tap Enable Hot Reloading • Make Change the file, and hit Save. • See the changes in Simulators.
  8. 8. Structure
  9. 9. JSX • JSX is a JavaScript syntax extension that looks similar to XML. • We use a JSX to write User Interface (UI). • JSX use camelCase. • We use JSX at the render() function of a React component.
  10. 10. index.ios.js
 index.android.js
  11. 11. JSX Syntax <Text>Hello World!</Text> <Image style={{height:100, width:100}} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} /> Tag name: Text Opening Tag Closing Tag Tag body Attribute Name Attribute ValueSelf Closing Tag
  12. 12. Attribute Value • Using JavaScript Expression as Attribute Value, Use { } • Using String as Attribute Value, Use ''
  13. 13. Putting JS Logic in JSX • Using JavaScript Statements, Put it between { }
  14. 14. Comment • To comment in JSX, Put it between {/* */}, {// … n 
 }
  15. 15. One Outmost Parent Tag Rules OK! 
 Only one outmost parent tags: View BAD! 
 Multiple outmost parent tags: Text,Text
  16. 16. Basic Elements <Text>Hello World!</Text> iOS Android <Image style={{height:100, width:100}} source={{uri: 'https://facebook.
 github.io/react/img/logo_og.png'}} /> <Switch /> <View></View> (Container) (Container)
  17. 17. Basic Elements <TextInput style={{height:40, borderColor:
 'gray', borderWidth: 1}} value='Useless TextInput’ /> iOS Android<TextInput
 multiLine={true} numberOfLine={4} style={{height:100, borderColor:
 'gray', borderWidth: 1}} value='Useless MultiLine TextInput’ />
  18. 18. Basic Elements <TouchableOpacity onPress={()=>{}} style={{borderColor:'#f00', backgroundColor:'#faa', borderWidth: 1, padding:10}}> <Text>Touch me for Opacity!</Text> </TouchableOpacity> iOS & Android: Default iOS & Android: Tapping <TouchableHighlight onPress={()=>{}} underlayColor='#f00a' style={{borderColor:'#f00', backgroundColor:'#faa', borderWidth:1, padding:10}}> <Text>Touch me for Highlight!</Text> </TouchableHighlight>
  19. 19. JSX’s Example
  20. 20. Style
  21. 21. Basic CSS
  22. 22. View: Blue Box 80 80 80 8040 40 40 40 Margin Padding BorderRadius 20 Width: 200 Height: 200
  23. 23. View: Red Box+ Text Flex:1 40
  24. 24. Exercise I (5 min)
  25. 25. More CSS for View
  26. 26. More CSS for Text
  27. 27. Flexbox Layout • Flexbox => CSS Flexible Box Layout (in W3C Last Call Working Draft) • Providing efficient way to layout, align and distribute space among items in a container, even when their size is unknown and/or dynamic (flex) • Containers can alter its items width/height and order to best fill the available space. • Flexbox is a direction-agnostic, which support complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.)
  28. 28. • main axis - Primary axis of a flex container, 
 defined by flexDirection. • main-start | main-end — Flex items placed within container starting from main-start and going to main-end.
 • main-size - Flex item’s width or height, whichever is in the primary dimension. Above is flexDirection = row (horizontal)
  29. 29. Above is flexDirection = row (horizontal) • cross axis - Secondary axis that perpendicular to the 
 primary axis (opposed with the flexDirection) • cross-start | cross-end - Flex lines are filled with items and
 placed into the container starting on the cross-start side or
 on the cross-end side.
 • cross-size - the flex item’s width or height, whichever is in
 the cross dimension.
  30. 30. Two types of Flex properties Containers • flexDirection • justifyContent • alignItems • flexWrap Items • flex • alignSelf
  31. 31. Containers • flexDirection • justifyContent • alignItems • flexWrap
  32. 32. FlexDirection Horizontally
 flexDirection: row; Vertically
 flexDirection: column; (Container)
  33. 33. Default flexDirection in React Native is column
  34. 34. Justify Content • Adding justifyContent to a component's style determines the distribution of children along the primary axis. • Should children be distributed at the start, the center, the end, or spaced evenly? • Available options are flex- start, center, flex- end, space-around, and space-between. • Default is flex-start (Container) flexDirection: ‘column’, 
 justifyContent: ‘space-between’
  35. 35. Align Items • Adding alignItems to a component's style determines the alignment of children along the secondary axis (if the primary axis is row, then the secondary is column, and vice versa). • Should children be aligned at the start, the center, the end, or stretched to fill? • Available options are flex- start, center, flex- end, and stretch. • Default is flex-start (Container) flexDirection: ‘column’, 
 justifyContent: ‘center’, alignItems: ‘center’
  36. 36. FlexWrap • By default, flex items will all try to fit onto one line. • Adding FlexWrap, You can change that and allow the items to wrap as needed with this property. • Direction also plays a role here, determining the direction new lines are stacked in. • Available options are nowrap, wrap • Default is nowrap (Container) nowrap vs wrap
  37. 37. Items • flex • alignSelf
  38. 38. Flex • “Flex” CSS syntax applied to item elements to tell how much they can stretches inside their container by compares with its siblings. • {flex: (positive integer number)}, e.g., {flex : 1} • They equally divide all container’s space by the sum of flex values of their children, then allocate space according to each child’s flex score. (Item)
  39. 39. Align Self • Adding alignSelf to a component's style determines the alignment of itself along the secondary axis (overwrite the alignItems from its container). • Available options are auto, flex-start, center, flex-end, and stretch. • Default is auto (Follow the alignItems from its container) (Item)
  40. 40. Colors • '#f0f' (#rgb) • '#f0fc' (#rgba) • '#ff00ff' (#rrggbb) • '#ff00ff00' (#rrggbbaa) • 'rgb(255, 255, 255)' • 'rgba(255, 255, 255, 1.0)' • 'hsl(360, 100%, 100%)' • 'hsla(360, 100%, 100%, 1.0)' • 'transparent' • 'red' • 0xff00ff00 (0xrrggbbaa)
  41. 41. More Colors… https://facebook.github.io/react-native/docs/colors.html
  42. 42. Exercise II (10 min)
  43. 43. Exercise III (15 min)
  44. 44. Exercise IV (15 min)

×