[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
13 likes9,808 views
This document provides information and instructions for setting up a React Native development environment and building a basic flexbox layout application. It includes links to source code and tutorials for setting up React Native on Windows and Mac systems. The document then explains key React Native concepts like JSX syntax, basic elements, styles, and Flexbox layout properties. It provides code examples and instructions for exercises to build out a flexbox application.
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-14-320.jpg)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-27-320.jpg)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-28-320.jpg)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-30-320.jpg)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-39-320.jpg)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-41-320.jpg)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-43-320.jpg)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-46-320.jpg)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://image.slidesharecdn.com/l4-react-native-layout-160911060742/85/React-Native-Lecture-4-Basic-Elements-and-UI-Layout-by-using-FlexBox-48-320.jpg)
[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox
- 1. Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited. [email protected]
- 2. All source code • https://github.com/kobkrit/react-native-class-2017
- 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. 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. 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. • 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. Structure
- 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.
- 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. Attribute Value • Using JavaScript Expression as Attribute Value, Use { } • Using String as Attribute Value, Use ''
- 13. Putting JS Logic in JSX • Using JavaScript Statements, Put it between { }
- 15. Comment • To comment in JSX, Put it between {/* */}, {// … n }
- 16. One Outmost Parent Tag Rules OK! Only one outmost parent tags: View BAD! Multiple outmost parent tags: Text,Text
- 17. 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)
- 18. 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’ />
- 19. 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>
- 20. JSX’s Example
- 21. Style
- 22. Basic CSS
- 23. View: Blue Box 80 80 80 8040 40 40 40 Margin Padding BorderRadius 20 Width: 200 Height: 200
- 24. View: Red Box+ Text Flex:1 40
- 25. Exercise I (5 min)
- 26. More CSS for View
- 29. More CSS for Text
- 31. 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.)
- 32. • 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)
- 33. 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.
- 34. Two types of Flex properties Containers • flexDirection • justifyContent • alignItems • flexWrap Items • flex • alignSelf
- 35. Containers • flexDirection • justifyContent • alignItems • flexWrap
- 37. Default flexDirection in React Native is column
- 38. 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’
- 40. 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’
- 42. 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
- 45. 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)
- 47. 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)
- 49. 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)
- 51. Exercise II (10 min)
- 52. Exercise III (15 min)
- 53. Exercise IV (15 min)