React Native实战项目企业通信录（含视频教程）- 登录界面开发

React Native实战项目企业通信录- 登录界面开发

前言

上节课讲解了项目搭建，视频教程录制的不好，我会改进，接下来就是功能模块的开发了，这节课我们会把登录界面开发出来。

修改应用图标

首先我们要先准备一张PNG格式的图片，最号是1024*1024大小，图片长宽必须一样，否则会报错。

把图片拷贝到app/assets/ 替换icon.png，然后执行Baker为我们提供的命令：

npm run icons

修改应用名称

修改Android应用名称

vim app/android/app/src/main/res/values/strings.xml

修改IOS应用名称

vim app/ios/AdressBook/Info.plist

使用Navigator

因为我们APP有多个页面，比如登录，主页面，添加员工信息，发送通知等等，所以我们要使用到导航，RN官方的Navigator对怎么使用倒是做了介绍，大家去看一下。

这里我给大家简单理一下思路：

1. 在根组件中引入Navgitor以及第一个要展示的组件：

const { View, Text, Navigator} = 'react-native';
import FirstPage from '../FirstPage';

2. 想好导航跳转时路由的信息：

{
    component: //需要跳转到的组件（必须）
    title: //导航栏的文字（必须）
    rightButtonClick: //点击导航栏右边按钮调用的函数。（可有可无、没有这个参数的话，就不渲染右边的按钮）
    type: //页面跳转时的动画效果。（可有可无，没有设置该参数的化就使用默认方式）
    passProps: //传递的参数
}
这里没有设置左键的相关信息，是因为我们想把左键写死了，就一个按钮，调用pop函数就可以了。
//type有以下几种类型
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.SwipeFromLeft
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.HorizontalSwipeJumpFromLeft
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

3. 在根组件中使用Navigaor：

class App extends Component {
  configureScene(route, routeStack) {
    if (route.type == 'Bottom') {
      return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
    }
    return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
  }
  renderScene(route, navigator) {
    return <route.component navigator={navigator}  {...route.passProps} />;
  }

  render() {
    return (
      <View style={styles.container}>
        <Navigator
          initialRoute={{component: FirstPage, title: '登录'}}
          configureScene={this.configureScene}
          renderScene={this.renderScene}
          navigationBar={
            <Navigator.NavigationBar
              routeMapper={NavigationBarRouteMapper}
              style={{backgroundColor: '#FF3300'}}
            />
          }
        />
      </View>
    );
  }
}

组件内跳转

this.props.navigator.push({
  component: SecondPage,
  title: '主页'
  type: type
})

开发登录组件

创建登录组件

npm run generate

使用到的开源组件：

react-native-vector-icons
react-native-textinput-effects
apsl-react-native-button
react-native-simple-toast

安装组件：

npm i -S react-native-vector-icons  react-native-textinput-effects apsl-react-native-button react-native-simple-toast 

组件名称为LoginPage，类型是Component

效果图：

代码

App/index.js

import ReactNative from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import LoginPage from '../LoginPage';

const { View, Text, Navigator, Image, TouchableHighlight  } = ReactNative;

const NavigationBarRouteMapper={
  LeftButton: (route, navigator, index, navState) =>
  {
    if(index > 0)
    {
      return (<Image style={{width: 35, height: 35}} source={require('../../images/back.png')} />);
    } 
  },
  RightButton: (route, navigator, index, navState) =>
  {
    if(route.rightButtonClick){
      return (<TouchableHighlight onPress={route.rightButtonClick}><Image style={{width: 35, height: 35}} source={require('../../images/add.png')} /></TouchableHighlight>);
    }   
  },
  Title: (route, navigator, index, navState) =>
  { 
    return (<Text style={styles.navTitle}>{route.title}</Text>); 
  },
}

class App extends Component {
  configureScene(route, routeStack) {
    if (route.type == 'Bottom') {
      return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
    }
    return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
  }
  renderScene(route, navigator) {
    return <route.component navigator={navigator}  {...route.passProps} />;
  }

  render() {
    return (
      <View style={styles.container}>
        <Navigator
          initialRoute={{component: LoginPage, title: '登录'}}
          configureScene={this.configureScene}
          renderScene={this.renderScene}
          navigationBar={
            <Navigator.NavigationBar
              routeMapper={NavigationBarRouteMapper}
              style={styles.navBar}
            />
          }
        />
      </View>
    );
  }
}

export default App;

App/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
  },
  navBar: {
    backgroundColor: '#576b95',
  },
  navTitle: {
    color: 'white',
    fontSize: 24,
    alignSelf: 'center'
  }
});

LoginPage/index.js

import React, { Component } from 'react';
import {
  ScrollView,
  Text,
  View,
  Image,
} from 'react-native';

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Button from 'apsl-react-native-button';
import Toast from 'react-native-simple-toast';

import {
  Fumi,
} from 'react-native-textinput-effects';

import styles from './styles';

class LoginPage extends Component {
  unSuport(){
    Toast.show('抱歉，该功能还未开放');
  }

  render() {
    return (
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.content}
      >
        <View style={[styles.card2, { backgroundColor: '#a9ceca' }]}>
          <Image style={{width: 100, height: 100, alignSelf: 'center', marginBottom: 20}}source={require('../../images/icon.png')} />
          <Fumi
            label={'用户名'}
            labelStyle={{ color: '#a3a3a3' }}
            inputStyle={{ color: '#f95a25' }}
            iconClass={FontAwesomeIcon}
            iconName={'user'}
            iconColor={'#f95a25'}
          />
          <Fumi
            style={styles.input}
            label={'密    码'}
            labelStyle={{ color: '#a3a3a3' }}
            inputStyle={{ color: '#f95a25' }}
            iconClass={FontAwesomeIcon}
            iconName={'unlock'}
            iconColor={'#f95a25'}
          />
          <View style={styles.linkContainer}>
            <Text style={styles.linkText} onPress={()=>this.unSuport()}>忘记密码</Text>
            <Text style={styles.linkText} onPress={()=>this.unSuport()}>新用户注册</Text>
          </View>
          <Button style={styles.button} textStyle={styles.buttonText}>登录</Button>
        </View>
        <View style={styles.copyrightContainer}>
          <Text style={styles.copyright}>祥韵科技有限公司版权所有</Text>
          <Text style={styles.copyright}>非本公司内部员工禁止登录</Text>
        </View>
      </ScrollView>
    );
  }
}


export default LoginPage;

LoginPage/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 64,
    backgroundColor: 'white',
  },
  content: {
    // not cool but good enough to make all inputs visible when keyboard is active
    paddingBottom: 300,
  },
  card2: {
    paddingVertical: 16,
    paddingLeft: 10,
    paddingRight: 10,
  },
  input: {
    marginTop: 4,
  },
  title: {
    paddingBottom: 16,
    textAlign: 'center',
    color: '#404d5b',
    fontSize: 20,
    fontWeight: 'bold',
    opacity: 0.8,
  },
  linkContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 30,
  },
  linkText: {
    fontSize: 13,
    color: '#0000FF',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#576b95',
    marginTop: 30,
    marginBottom: 50,
    borderWidth: 0,
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
  },
  copyrightContainer: {
    marginTop: 60,
  },
  copyright: {
    fontSize: 11,
    marginTop: 10,
    color: '#888',
    justifyContent: 'center',
    alignSelf: 'center',
  }
});

关注我的微信公众号回复“12”查看视频教程下载连接。