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”查看视频教程下载连接。