React Native实战项目企业通信录(含视频教程)- 主界面开发
创建主界面
各位小伙伴,大家好,我是Peter,前面三节课讲解到了登录功能的实现,这节课我们继续下一步的开发,主界面的开发。
根据该项目的需求,主界面包含三块:通信录、通知和设置。
使用到的开源组件
react-native-smartbar
创建主界面
npm run generate
类型是Component,命名为MainNavgation。
创建三个内嵌组件
因为主界面中包含了三个子组件:通信录(Contacts)、通知(Notifications)和设置(Settings),所以这里一并把这三个组件创建出来。
这里需要注意的一点:通信录和通知组件都需要从Redux State中获取数据,所以类型不是Component,而是Container。
组合主界面
在主界面(MainNavgation)中通过import引入三个子组件。
这样我们主界面就出来了,下面就是如何在登录界面(LoginPage)中实现登录成功后跳转到主界面。
MainNavgation/index.js
import ReactNative from 'react-native';
import React, { Component } from 'react';
import TabBar from 'react-native-smartbar';
import styles from './styles';
import Contacts from '../Contacts';
import Notifications from '../Notifications';
import Settings from '../Settings';
const { View, Text } = ReactNative;
class MainNavgation extends Component {
constructor(props) {
super(props);
// 初始状态
this.state = {
toggle: true,
index: 2
}
}
render() {
return (
<View style={styles.container}>
<TabBar
activeColor={'#FE985B'}
toggle={this.state.toggle}
ref={tabbar => this.tabbar = tabbar}
index={this.state.index}
>
<TabBar.Item
icon={require('../../images/account.png')}
selectedIcon={require('../../images/account-filling.png')}
text={'通信录'}
>
<Contacts />
</TabBar.Item>
<TabBar.Item
icon={require('../../images/clock.png')}
selectedIcon={require('../../images/clock-filling.png')}
text={'通知'}
>
<Notifications />
</TabBar.Item>
<TabBar.Item
icon={require('../../images/setting.png')}
selectedIcon={require('../../images/setting-filling.png')}
text={'设置'}
>
<Settings />
</TabBar.Item>
</TabBar>
</View>
);
}
}
export default MainNavgation;
登录跳转
修改
LoginPage/index.js
的onLogin
函数
onLogin(){
Parse.User.logIn(this.state.username, this.state.password, {
success: function(user) {
Toast.show('登录成功');
},
error: function(user, error) {
Toast.show('登录失败,请重新登录');
}
}).done(()=>this.props.navigator.replace({
component: MainNavgation,
title: '主界面',
}))
}
微信二维码
这样我们主界面和登录跳转就实现了,请大家关注我的微信公众号回复【14】查看这节课的视频和源代码,大家有任何疑问,都可以在下方给我留言,或者在微信公上给我发消息,我会第一时间回复大家。