React Native实战项目企业通信录- 登录界面开发
前言
上节课讲解了项目搭建，视频教程录制的不好，我会改进，接下来就是功能模块的开发了，这节课我们会把登录界面开发出来。
修改应用图标
首先我们要先准备一张PNG格式的图片，最号是1024*1024大小，图片长宽必须一样，否则会报错。
应用图标
把图片拷贝到app/assets/ 替换icon.png，然后执行Baker为我们提供的命令：
npm run icons
修改应用名称
修改Android应用名称
vim app/android/app/src/main/res/values/strings.xml
修改Android应用名称
修改IOS应用名称
vim app/ios/AdressBook/Info.plist
修改IOS名称
使用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
);
}
}
组件内跳转
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 ({route.title} );
},
}
class App extends Component {
configureScene(route, routeStack) {
if (route.type == 'Bottom') {
return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
}
return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
}
renderScene(route, navigator) {
return
);
}
}
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 (
this.unSuport()}>忘记密码
this.unSuport()}>新用户注册
祥韵科技有限公司版权所有
非本公司内部员工禁止登录
);
}
}
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”查看视频教程下载连接。
关注微信公众号