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

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}><TabBaractiveColor={'#FE985B'}toggle={this.state.toggle}ref={tabbar => this.tabbar = tabbar}index={this.state.index}><TabBar.Itemicon={require('../../images/account.png')}selectedIcon={require('../../images/account-filling.png')}text={'通信录'}><Contacts /></TabBar.Item><TabBar.Itemicon={require('../../images/clock.png')}selectedIcon={require('../../images/clock-filling.png')}text={'通知'}><Notifications /></TabBar.Item><TabBar.Itemicon={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】查看这节课的视频和源代码，大家有任何疑问，都可以在下方给我留言，或者在微信公上给我发消息，我会第一时间回复大家。