Front End @ Mirador Financial
Twitter: @browniefed
Github: browniefed
Email: browniefed@gmail.com
JavaScript
JSON
ObjC
Java
Native Views
Build Views
Business Logic
Flexbox Layout
http://flexboxfroggy.com/
FlexBox is just ratios
Flex 2
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Flex 1
Column (Default)
Row
Flex Direction
import React from "react-native";
let {View, Text, Image} = React;
let App = React.createClass({
render: function() {
return (
<View>
<Text>{this.state.text}</Text>
<Image source="http://google.com/logo.png" />
</View>
)
}
});
import React from "react";
let App = React.createClass({
render: function() {
return (
<div>
<span>{this.state.text}</span>
<img src="http://google.com/logo.png" />
</div>
)
}
});
React Native vs React Web
import React from "react-native";
let {View, Text, Image, TouchableOpacity } = React;
let App = React.createClass({
getInitialState: function() {
return { text: 'Some Text To Change Later' }
},
handlePress: function() {
this.setState({
text: 'Some new Text'
});
},
render: function() {
return (
<View>
<TouchableOpacity onPress={this.handlePress}>
<Text>{this.state.text}</Text>
<Image source="http://google.com/logo.png" />
</TouchableOpacity>
</View>
)
}
});
<View>
<TouchableOpacity onPress={this.handlePress}>
<Text>Some Text To Change Later</Text>
<Image source="http://google.com/logo.png" />
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={this.handlePress}>
<Text>Some New Text</Text>
<Image source="http://google.com/logo.png" />
</TouchableOpacity>
</View>
import React from "react-native";
let {View, Text, Image, StyleSheet } = React;
let App = React.createClass({
getInitialState: function() {
return { text: 'Some Text To Change Later' }
},
handlePress: function() {
this.setState({
text: 'Some new Text'
});
},
render: function() {
return (
<View style={styles.container}>
<Text style={styles.text}>{this.state.text}</Text>
<Image style={styles.image} source="http://google.com/logo.png" />
</View>
)
}
});
let styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent: 'center'},
text: { fontSize: 22, color: 'red' },
image: { width: 200, height: 90 }
});
Styling + Layout