React native login, signup and navigation

点击打开链接 favicon.png
src/components/Form.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity
} from 'react-native';

export default class Form extends Component<{}> {
render() {
return (
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder='Email'
placeholderTextColor='#ffffff'
selectionColor="#fff"
keyboardType="email-address"
onSubmitEditing={()=> this.password.focus()}
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder='Password'
secureTextEntry={true}
placeholderTextColor='#ffffff'
ref={(input) => this.password = input}
/>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}> {this.props.type}</Text>
</TouchableOpacity>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center'
},
inputBox: {
width:300,
backgroundColor:'rgba(255,255,255,0.2)',
borderRadius:25,
paddingHorizontal:16,
fontSize:16,
color:'#ffffff',
marginVertical:10
},
button: {
width:300,
backgroundColor:'#1c313a',
borderRadius:25,
marginVertical:10,
paddingVertical:12
},
buttonText: {
fontSize:16,
fontWeight:'500',
color: '#ffffff',
textAlign:'center'
}
});
src/components/Logo.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';

export default class Logo extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Image
style={{width: 50, height: 50}}
source={require('../assets/favicon.png')}
/>
<Text style={styles.logoText}>Wecome to my app</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
logoText: {
marginVertical:15,
fontSize:18,
color:'rgba(255,255,255,0.7)'
}
});
src/pages/Login.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
StatusBar,
TouchableOpacity
} from 'react-native';

import Logo from '../components/Logo';
import Form from '../components/Form';
import {Actions} from 'react-native-router-flux';

export default class Login extends Component<{}> {
signup(){
Actions.signup();
}

render() {
return (
<View style={styles.container}>
<Logo/>
<Form type="Login"/>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Don't have an account yet?</Text>
<TouchableOpacity onPress={this.signup}>
<Text style={styles.signupButton}>Signup</Text>
</TouchableOpacity>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: '#455a64',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
signupTextCont: {
flexGrow: 1,
alignItems: 'flex-end',
justifyContent: 'center',
paddingVertical:16,
flexDirection:'row'
},
signupText: {
color:'rgba(255,255,255,0.6)',
fontSize:16
},
signupButton: {
fontSize:16,
color:'#ffffff',
fontWeight:'500'
}
});
src/pages/Signup.js

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
StatusBar,
TouchableOpacity
} from 'react-native';

import Logo from '../components/Logo';
import Form from '../components/Form';
import {Actions} from 'react-native-router-flux';

export default class Signup extends Component<{}> {

goBack() {
Actions.pop();
}

render() {
return (
<View style={styles.container}>
<Logo/>
<Form type="Signup"/>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Already have an account </Text>
<TouchableOpacity onPress={this.goBack}>
<Text style={styles.signupButton}>Sign in</Text>
</TouchableOpacity>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: '#455a64',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
signupTextCont: {
flexGrow: 1,
alignItems: 'flex-end',
justifyContent: 'center',
paddingVertical:16,
flexDirection:'row'
},
signupText: {
color:'rgba(255,255,255,0.6)',
fontSize:16
},
signupButton: {
fontSize:16,
color:'#ffffff',
fontWeight:'500'
}
});
src/Routes.js
import React, { Component } from 'react';
import {Router,Stack,Scene} from 'react-native-router-flux';

import Login from './pages/Login';
import Signup from './pages/Signup';

export default class Routes extends Component<{}> {
render() {
return (
<Router>
<Stack key="root" hideNavBar={true}>
<Scene key="login" component={Login} title="Login" initial={true}/>
<Scene key="signup" component={Signup} title="Register"/>
</Stack>
</Router>
)
}
}App.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
StatusBar
} from 'react-native';

import Routes from './src/Routes';

export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<StatusBar
backgroundColor="#1c313a"
barStyle="light-content"
/>
<Routes/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
}
});

需要安装路由组件
myths-Mac:zigoo myth$ cd $HOME/zigoo && npm i react-native-router-flux --save
> react-native-router-flux@4.0.0-beta.28 postinstall /Users/myth/zigoo/node_modules/react-native-router-flux
> opencollective postinstall
                Thanks for installing react-native-router-flux
        Please consider donating to our open collective
                        to help us maintain this package.
                           Number of contributors: 214
                               Number of backers: 6
                               Annual budget: $460
                              Current balance: $460
  Donate: https://opencollective.com/react-native-router-flux/donate + react-native-router-flux@4.0.0-beta.28
updated 1 package in 14.931s
myths-Mac:zigoo myth$