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)'
        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$