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}>
        <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】查看这节课的视频和源代码，大家有任何疑问，都可以在下方给我留言，或者在微信公上给我发消息，我会第一时间回复大家。