sweet some initial native views

This commit is contained in:
Peter Cottle 2015-04-28 17:54:40 -07:00
parent e9476696f4
commit ec44f19d3e
5 changed files with 117 additions and 15 deletions

View file

@ -0,0 +1,50 @@
var NavButton = require('../native_react_views/NavButton');
var React = require('react-native');
var Routes = require('../constants/Routes');
var {
ScrollView,
StyleSheet,
Text,
View,
} = React;
var Colors = require('../constants/Colors');
var TerminalCardView = require('../native_react_views/TerminalCardView');
var NUXView = React.createClass({
propTypes: {
navigator: React.PropTypes.object.isRequired,
},
render: function() {
return (
<View style={styles.background}>
<View style={styles.headerSpacer} />
<TerminalCardView />
<NavButton
text="Level 1"
onPress={() => {
this.props.navigator.push(
Routes.getRouteForID(Routes.LEVEL_SELECT)
);
}}
/>
</View>
);
}
});
var styles = StyleSheet.create({
background: {
backgroundColor: Colors.blueBackground,
flex: 1
},
headerSpacer: {
height: 20,
backgroundColor: '#EFEDEE',
},
});
module.exports = NUXView;

View file

@ -2,13 +2,14 @@ var NavButton = require('../native_react_views/NavButton');
var React = require('react-native');
var Routes = require('../constants/Routes');
var {
PixelRatio,
ScrollView,
StyleSheet,
Text,
View,
} = React;
var Colors = require('../constants/Colors');
var SequenceSelectView = React.createClass({
propTypes: {
@ -17,27 +18,34 @@ var SequenceSelectView = React.createClass({
render: function() {
return (
<ScrollView>
<View style={styles.background}>
<View style={styles.headerSpacer} />
<View>
<NavButton
text="Level 1"
onPress={() => {
this.props.navigator.push(
Routes.getRouteForID(Routes.LEVEL_SELECT)
);
}}
/>
</View>
</ScrollView>
<ScrollView>
<View>
<NavButton
text="Level 1"
onPress={() => {
this.props.navigator.push(
Routes.getRouteForID(Routes.LEVEL_SELECT)
);
}}
/>
</View>
</ScrollView>
</View>
);
}
});
var styles = StyleSheet.create({
background: {
backgroundColor: Colors.blueBackground,
flex: 1
},
headerSpacer: {
height: 40
height: 20,
backgroundColor: '#EFEDEE',
},
});

View file

@ -0,0 +1,36 @@
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var Colors = require('../constants/Colors');
var TerminalCardView = React.createClass({
render: function() {
return (
<View style={styles.terminalWindow}>
<Text style={styles.terminalText}>
Welcome to learn git branching
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
terminalWindow: {
backgroundColor: Colors.terminalBackground,
},
terminalText: {
color: Colors.terminalText,
fontFamily: 'Courier',
fontSize: 16,
fontWeight: 'bold'
},
});
module.exports = TerminalCardView;