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)' placeholder='Email' placeholderTextColor='#ffffff' selectionColor="#fff" keyboardType="email-address" onSubmitEditing={()=> this.password.focus()} /> <TextInput style={styles.inputBox} underlineColorAndroid='rgba(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,0.2)',borderRadius:25,paddingHorizontal:16,fontSize:16,color:'#ffffff',marginVertical:10 },button: { width:300,backgroundColor:'#1c313a',marginVertical:10,paddingVertical:12 },buttonText: { fontSize:16,fontWeight:'500',color: '#ffffff',textAlign:'center' } });
src/components/logo.js
import React,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,0.7)' } });
src/pages/Login.js
import React,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,signupTextCont: { flexGrow: 1,alignItems: 'flex-end',justifyContent: 'center',paddingVertical:16,flexDirection:'row' },signupText: { color:'rgba(255,0.6)',fontSize:16 },signupButton: { fontSize:16,fontWeight:'500' } });
src/pages/Signup.js
import React,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',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,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.28updated 1 package in 14.931smyths-Mac:zigoo myth$