Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

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

8.059 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software

[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)

×