Setup navigation router
This commit is contained in:
parent
ee6515d884
commit
f8946434d8
9 changed files with 160 additions and 85 deletions
33
app/components/app.js
Normal file
33
app/components/app.js
Normal file
|
@ -0,0 +1,33 @@
|
|||
import React from 'react-native';
|
||||
|
||||
import RouteMaster from './routes/RouteMaster';
|
||||
|
||||
const {
|
||||
Navigator,
|
||||
} = React;
|
||||
|
||||
export default class extends React.Component {
|
||||
renderScene(route, nav) {
|
||||
const props = route.props || {};
|
||||
return <route.component nav={nav} {...props}/>;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.initialRoute = RouteMaster.get('LOGIN');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Navigator
|
||||
renderScene={this.renderScene}
|
||||
initialRoute={this.initialRoute}
|
||||
configureScene={(route) => {
|
||||
if (route.sceneConfig) {
|
||||
return route.sceneConfig;
|
||||
}
|
||||
return Navigator.SceneConfigs.PushFromRight;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
10
app/components/routes/RouteMaster.js
Normal file
10
app/components/routes/RouteMaster.js
Normal file
|
@ -0,0 +1,10 @@
|
|||
import { Map } from 'immutable';
|
||||
|
||||
import Login from './login';
|
||||
|
||||
export default Map({
|
||||
'LOGIN': {
|
||||
id: 'login',
|
||||
component: Login
|
||||
}
|
||||
});
|
86
app/components/routes/login.js
Normal file
86
app/components/routes/login.js
Normal file
|
@ -0,0 +1,86 @@
|
|||
import React from 'react-native';
|
||||
import Immutable from 'immutable';
|
||||
|
||||
import GlobalStyles from '../../settings/styles';
|
||||
|
||||
const {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
TextInput,
|
||||
TouchableHighlight,
|
||||
ScrollView,
|
||||
BackAndroid
|
||||
} = React;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: .5,
|
||||
flexWrap: 'nowrap',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
input: {
|
||||
height: 50,
|
||||
width: 300,
|
||||
borderColor: 'gray',
|
||||
borderWidth: 1
|
||||
},
|
||||
loginButton: {
|
||||
backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
|
||||
margin: 10,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 10
|
||||
},
|
||||
loginButtonText: {
|
||||
fontSize: 16,
|
||||
color: 'white',
|
||||
},
|
||||
title: {
|
||||
fontSize: 25,
|
||||
margin: 13
|
||||
}
|
||||
});
|
||||
|
||||
export default class Login extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = Immutable.Map({
|
||||
password: '',
|
||||
});
|
||||
}
|
||||
|
||||
validate() {
|
||||
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
BackAndroid.addEventListener('hardwareBackPress', () => { return true; }); // Disable back button
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>
|
||||
Login to continue
|
||||
</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
onChangeText={(password) => this.state.set('password', password)}
|
||||
value={this.state.get('password')}
|
||||
onSubmitEditing={this.validate}
|
||||
placeholder="Password"
|
||||
/>
|
||||
<TouchableHighlight style={styles.loginButton} onPress={this.validate}>
|
||||
<Text style={styles.loginButtonText}>
|
||||
Authenticate
|
||||
</Text>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
};
|
8
app/settings/constants.js
Normal file
8
app/settings/constants.js
Normal file
|
@ -0,0 +1,8 @@
|
|||
import { Map } from 'immutable';
|
||||
|
||||
export default Map({
|
||||
PROJECT_DATA: {
|
||||
repository: 'https://github.com/RealOrangeOne/Sphere',
|
||||
CI_Badge: 'https://circleci.com/gh/RealOrangeOne/Sphere.svg?style=svg'
|
||||
}
|
||||
});
|
5
app/settings/styles.js
Normal file
5
app/settings/styles.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
import { Map } from 'immutable';
|
||||
|
||||
export default Map({
|
||||
CIRCLE_BLUE: 'blue'
|
||||
});
|
|
@ -1,51 +1,18 @@
|
|||
/**
|
||||
* Sample React Native App
|
||||
* https://github.com/facebook/react-native
|
||||
*/
|
||||
'use strict';
|
||||
import React, {
|
||||
AppRegistry,
|
||||
Component,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native';
|
||||
import React from 'react-native';
|
||||
import App from './app/components/app.js';
|
||||
|
||||
class Sphere extends Component {
|
||||
const {
|
||||
AppRegistry,
|
||||
} = React;
|
||||
|
||||
|
||||
class Sphere extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.welcome}>
|
||||
Welcome to React Native!
|
||||
</Text>
|
||||
<Text style={styles.instructions}>
|
||||
To get started, edit index.android.js
|
||||
</Text>
|
||||
<Text style={styles.instructions}>
|
||||
Shake or press menu button for dev menu
|
||||
</Text>
|
||||
</View>
|
||||
<App />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
},
|
||||
instructions: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
marginBottom: 5,
|
||||
},
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('Sphere', () => Sphere);
|
||||
|
|
52
index.ios.js
52
index.ios.js
|
@ -1,52 +1,18 @@
|
|||
/**
|
||||
* Sample React Native App
|
||||
* https://github.com/facebook/react-native
|
||||
*/
|
||||
'use strict';
|
||||
import React, {
|
||||
AppRegistry,
|
||||
Component,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native';
|
||||
import React from 'react-native';
|
||||
import App from './app/components/app.js';
|
||||
|
||||
class Sphere extends Component {
|
||||
const {
|
||||
AppRegistry,
|
||||
} = React;
|
||||
|
||||
|
||||
class Sphere extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.welcome}>
|
||||
Welcome to React Native!
|
||||
</Text>
|
||||
<Text style={styles.instructions}>
|
||||
To get started, edit index.ios.js
|
||||
</Text>
|
||||
<Text style={styles.instructions}>
|
||||
Press Cmd+R to reload,{'\n'}
|
||||
Cmd+D or shake for dev menu
|
||||
</Text>
|
||||
</View>
|
||||
<App />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
},
|
||||
instructions: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
marginBottom: 5,
|
||||
},
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('Sphere', () => Sphere);
|
||||
|
|
0
scripts/bundle
Normal file → Executable file
0
scripts/bundle
Normal file → Executable file
0
scripts/emulator
Normal file → Executable file
0
scripts/emulator
Normal file → Executable file
Reference in a new issue