daniel graham phd react native developmentimport * as react from 'react'; import { text,...
TRANSCRIPT
R E A C T N AT I V E D E V E L O P M E N T
D A N I E L G R A H A M P H D
Let make this splash screen
B O X O F S P E C I F I C H E I G H T
A N D W I D T H
C O N TA I N I N G B O X W I T H B A C K G R O U N D
Just focusing on The Top Section
1 5 8 Title
Author
The Image’s Margin The Contains Padding
V I E W S A R E G O O D F O R T W O T H I N G S
Layout and Drawing shapes
import * as React from 'react';import { View } from 'react-native';
export default class App extends React.Component { render() { return ( <View > </View> ); }}
W I L L N O T S H O W A N Y T H I N G B E C A U S E T H E Y S TA R T O F D I M E N S I O N L E S S
export default class App extends React.Component { render() { return ( <View style={{width: 100, height: 100, backgroundColor:"black"}} >
</View> ); }}
View start of in the top left corner
B U T P H O N E S H AV E D I F F E R E N T S C R E E N S I Z E S W E M I G H T WA N T H A R D
C O D E D E T E N T I O N
export default class App extends React.Component { render() { return ( <View style={{width:100, height:100, backgroundColor:"green"}} /> <View style={{width:100, height:100, backgroundColor:"black"}} /> ); }}
Render takes a single JSX element We are returning two
This will result in an error
export default class App extends React.Component { render() { return ( <View style={{width:300, height:500, backgroundColor:"green"}} > <View style={{width:100, height:100, backgroundColor:"black"}} /> </View> ); }}
W E C A N U S E M U LT I P L E V I E W I F W E N E S T B E C A U S E W E W O U L D B E R E T U R N I N G A
S I N G L E J S X E L E M E N T
T H E V I E W S TA R T S I N T H E T O P L E F T
import * as React from 'react';import { View , StyleSheet} from 'react-native';
export default class App extends React.Component { render() { return ( <View style={styles.bigBox} > <View style={styles.littleBox} /> </View> ); }}
const styles = StyleSheet.create({ bigBox: {width:300, height:500, backgroundColor:"green"}, littleBox: {width:100, height:100, backgroundColor:"black"}})
I M P O R T S T Y L E S H E E T
PA S S N E W S T Y L E S M E T H O D T O S T Y L E S H E E T
R E T U R N S A N O P T I M I Z E D S E T O F S T Y L E S
I N F O R M AT I O N O N S T Y L E S
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
L AY O U T F O L L O W C S S S TA N D A R D S
Properties are similar to css properties exceptwith camel case naming
background-color => backgroundColor
C O M B I N I N G S T Y L E S
export default class App extends React.Component { render() { let color = "blue" return ( <View style={[styles.bigBox, {backgroundColor:color}]} > <View style={styles.littleBox} /> </View> ); }}
const styles = StyleSheet.create({ bigBox: {width:300, height:500, backgroundColor:"green"}, littleBox: {width:100, height:100, backgroundColor:"black"}})
D Y N A M I C A L A D D S T Y L E S
It will go through and assignall the properties the last one takes precedence
F L E X L AY O U T
T H R E E D E C I S I O N T O M A K E W I T H Y O U R F L E X L AY O U T
flexDirection
alignItems
justifyContent
https://snack.expo.io/@professorxii/flexboxdemo
F L E X B O X L AY O U T M O D E L
Container
Items
F L E X D I R E C T I O N
Row Flex Direction
Determines the primary axis
F L E X D I R E C T I O N
Column Flex Direction
J U S T I F Y C O N T E N T
Defines alignment along the primary axis
Flex start
Flex end
Flex Center
J U S T I F Y C O N T E N T
Space Between
Evenly Distributed starting and ending on the boundaries
Equal
J U S T I F Y C O N T E N T
S PA C E - A R O U N DDistributed evenlyEqual
Spaces not equal
space-evenl
Distributed evenlyNot Equal
Space Equal
A L I G N - C O N T E N T R E F E R S T O T H E S E C O N D A R Y A D D R E S S
Primary Axis Secondary Row Column Column Row
import * as React from 'react';import { Text, View, StyleSheet } from 'react-native';
export default class App extends React.Component { render() { // Primary Axis Options: column, row let flexDir = "row" //Distribution Primary Axis Options: flex-start, center, flex-end, space-around, space-between and space-evenly let justCont = "flex-end"
//Vertical Distribution secondary Axis: flex-start, center, flex-end, and stretch. let alignIt= "stretch" return ( <View style={{ flex: 1, flexDirection: flexDir, justifyContent: justCont, alignItems: alignIt, }}> <View style={{width: 100, height: 100, backgroundColor: 'red'}} /> <View style={{width: 100, height: 100, backgroundColor: 'green'}} /> <View style={{width: 100, height: 100, backgroundColor: 'blue'}} /> </View> ); }}
Discussed in next lecture
<View style={{ flex: 1, flexDirection: flexDir, justifyContent: justCont, alignItems: alignIt, }}>
Flex is short hand for
<View style={{ flexGrow: 1, flexShrink: 1, flexBasis: ‘auto’, flexDirection: flexDir, justifyContent: justCont, alignItems: alignIt, }}>
The component can grow
The component can shrink
Component is automatically size
F L E X G R O W / S H R I N K
11 1
21 1
Allows Elements to grow/shrink meet the requirements of the the layout
Order is used To determine
The space
All 1’s take up even Space
Some 1’s an 2 2 take up twice As much space
CSS Box Model
• Content - The content of the box, where text and images appear • Padding - Clears an area around the content. The padding is transparent • Border - A border that goes around the padding and content • Margin - Clears an area outside the border. The margin is transparen •
O R D E R P R O P E R T Y
1 2 3 4
- 1 1 2 3
Controls the Order properties are Laid out
2
F L E X B A S I S
Sets the initial size of the item
Flex-basis “auto” will use the Dimension of the element
Sets the initial size of the item
C O N T E N T
Flex-basis “auto” size Span to content
L E T ’ S W O R K O N S P L A S H S C R E E N
Let make this splash screen
Linear Gradient
Column Layout Center Justify and
Align
Get F
L I N E A R G R A D I E N T S N A C K
H T T P S : / / S N A C K . E X P O . I O / @ P R O F E S S O R X I I / S P L A S H - S C R E E N
import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient';
export default class App extends React.Component { render() { return ( <LinearGradient start={[1,1]} end={[0.4, 0.3]} colors={[ '#FFFFFF', '#000D0C', '#000D0C',]} style={styles.gradientStyles}> <Text style={styles.logo}> AckeePod </Text> </LinearGradient> ); } }
const styles = StyleSheet.create({ gradientStyles:{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, logo:{ color: 'white', fontWeight: 'bold', fontSize: 30, height:100, } })