04、RN wx 实践01--基本架构搭建

微信基本框架.png

版权声明：本文为博主原创文章，未经博主允许不得转载

PS:转载请注明出处
作者: TigerChain
地址: http://www.jianshu.com/p/8743156d3b61
本文出自 TigerChain 简书 RN 系列

教程简介

• 1、阅读对象

  本篇教程适合新手阅读，老手直接略过

• 2、教程难度

  初级

• 3、Demo 地址

https://github.com/githubchen001/rn-lesson/tree/master/lesson02/01-wxchatclient/wxchat

如果喜欢就给个 start 吧

正文

关于 RN 的一些基本组件使用，我们查看官方文档基本上就能使用，这里我们来一个综合的，模仿一下微信的客户端，来直观感受一下 RN 的魅力所在吧。

无图无真相，废话不多说，先看看我们使用 RN 写的微信客户端，图比较多，就不一一贴出来了「目前先放这几张，由于录制的 gif 图片太过大上传不了，所以就看图片吧」

001.jpg
002.jpg
003.jpg
004.jpg
005.jpg
006.jpg
007.jpg
008.jpg
009.jpg

这一小节我们先实现微信的基本框架如下图：

wx_basic_frame.gif

一、简单分析

我们来简单的分析一下微信的界面

wx.png

• 1、微信就是传统的 TAB+导航界面完成的
• 2、微信的整体框架可以分为三个部分，上部分是 TitleBar「1」,中间中内容体「2」，底部是 Tab 选项卡「3」
• 3、微信在 tab 切换过程中，TitleBar「 图中所示 1 」是固定不变的

二、技术选型

1、我们采用 RN 来模仿微信，肯定要先看官方有没有可以使用的组件，比如这个 tab 选项卡

从官网来看，和 tab 有关的就是 TabBarIos,针对性太强，只是 IOS 可以使用

tabbar_ios.png

2、继续在官网上找

可是找了好久没有找到再和 tab 相在的组件，难不成自已定义？「心中顿时有一千匹羊驼飘过」

3、上 npm/yarn 看看有没有三方依赖库

打开 npm/yarn 的官网，直接输入 react-native-tab，然后有自动提示功能，不要眨眼下面红色框框就是我们想要找的--react-native-tab-navigator

react-native-tab-nav.png

在 npm 中搜索的结果

react-native-tab-nav-yarn.png

在 yarn 中搜索的结果

不管三七二十八，我们打开再说地址是：https://github.com/happypancake/react-native-tab-navigator 我截取了部分静态图，从图中可以看到，这个完全满足我们的需求，并且是 IOS 和 Android 通吃

rn-tab-nav.png

4、开始整吧

我们既然都找到了我们要的组件，那么我们就直接开始整吧！先不要急，还有没有更好的，或者更适合的组件呢？看了官方文档的 Navigation 相关内容，看官网推荐了一个 React Navigation，然后根据官网给的连接https://reactnavigation.org/docs/intro/ 进去看了一下，我靠这个组件更爽，支持普通的导航、Tab 导航、和侧滑，简直是导航中的战斗机。下面是部分截图看一下「如果想了解更多，去官网查看」

react-nav-show.png

至于 React Navigation 的详细用法，这里不过多的做介绍，我们只是在项目中讲解部分用法，或者后期专门出一节来说 React Navigation，废话不多说，我们直接写代码「代码是写出来的」

三、开始撸码

1、在指定的目录初始化项目 wxchat

mkdir wxdemo
cd wxchat 
react-native init wxchat

等创建完成以后，看看目录结构

wx_folder.png

2、运行一下看结果 react-native run-android

react-native run-android

通过以上命令，我们成功的运行出来了项目

wx_init_result.png

这样我们项目就创建出来了，下面我们来搭建微信基本的 tab 框架

3、添加 React Navigation

经过我们上面的分析，我们要使用 tab 导航，首先要添加 React Navigation 组件

在命令行中输入

yarn add react-navigation / npm install --save react-navigation

建议使用 yarn ,具体可以看我原来的文章 React系列之--使用yarn包管理工具

yarn_add_react_nav.png

这样我就成功的安装了 React Navigation ，我们可以看到 package.json 的 dependencies 中多了 react-navigation

"dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.3",
    "react-navigation": "^1.0.0-beta.11"
 },

4、在根目录中新建 app 和 imgs 目录

app_imgs.png

其中 app 中是用来放 RN 组件的，imgs 中是用来放本地图片的

5、准备 tab 的图片

tab_imgs.png

我们将准备好的图片放到 imgs 目录中

6、在 app 目录中新建 Main.js

# Main.js
/* @flow weak */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
} from 'react-native';

import { TabNavigator  } from 'react-navigation';

/**导入封装的组件**/
import TabBarIcon from './component/TabBarIcon'


export default class Main extends Component {
  render() {
    return (
      <Tab />
    );
  }
}
//定义首页组件 
class Home extends Component{
  render(){
    return(
      <Text>首页</Text>
    )
  }
}
// tab 选项卡以及关联的 界面
const Tab = TabNavigator(
{
  Home:{
    screen:Home,
    navigationOptions:((navigation) =>({
      tabBarLabel: '微信',
      tabBarIcon: ({focused, tintColor }) => (
        <Image
        source={focused?require('../imgs/ic_weixin_selected.png'):require('../imgs/ic_weixin_normal.png')}
        style={styles.icon}
      />

      ),
    }))
  },
  Contact:{
    screen:Home,
    navigationOptions:((navigation) =>({
      tabBarLabel: '通讯录',
      tabBarIcon: ({focused, tintColor }) => (
        <Image
        source={focused?require('../imgs/ic_contacts_selected.png'):require('../imgs/ic_contacts_normal.png')}
        style={styles.icon}
      />
      ),
    }))
  },
  Find:{
    screen:Home,
    navigationOptions:((navigation) =>({
      tabBarLabel: '发现',
      tabBarIcon: ({focused, tintColor }) => (

        <Image
        source={focused?require('../imgs/ic_find_selected.png'):require('../imgs/ic_find_normal.png')}
        style={styles.icon}
      />

      ),
    }))
  },
  Me:{
    screen:Home,
    navigationOptions:((navigation) =>({
      tabBarLabel: '我',
      tabBarIcon: ({ focused,tintColor }) => (
        <Image
        source={focused?require('../imgs/ic_me_selected.png'):require('../imgs/ic_me_normal.png')}
        style={styles.icon}
      />
      ),
    }))
  }
},

);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  icon:{
    width: 25,
    height: 25,
  }
});

运行查看结果：

wx_tab_01.png

和微信 tab 还是有很大的差距，tab 没有在底部，并且图片没有显示出来，我们一步步来完善

7、让 tab 显示在底部，并且显示出图片

这里我们就配置一下 TabNavigator ，这里好加,核心代码

const Tab = TabNavigator(
{
    Home:{...},
    Contact:{...},
    ...
},
// 这里是新增的部分
{
// tab 位于屏幕底部
tabBarPosition: 'bottom',
// 选中最后一个 tab 按返回建直接退出应用，而不是返回第一个 tab 
backBehavior:'none',
}
)

我们再运行查一下效果

tabnav-bottom.png

在这里我载取了一部分图，说明问题即可，我们成功的把 tab 放在屏幕的底部了，下面我们添加其它配置，比如显示出图片，tab 的高度，字的颜色等等

8、配置 tab 达到微信样式

const Tab = TabNavigator(
{
    Home:{...},
    Contact:{...},
    ...
},
// 这里是新增的部分
{
// tab 位于屏幕底部
tabBarPosition: 'bottom',
// 选中最后一个 tab 按返回建直接退出应用，而不是返回第一个 tab 
backBehavior:'none',

// 新增 对 tabbar 的配置
  tabBarOptions: {
    //文本和图片选中颜色
    activeTintColor: '#45C018',
    //文本和图片未选中颜色
    inactiveTintColor: '#999999',
    //显示图片
    showIcon:'true',
    //文字的样式
    labelStyle: {
      fontSize: 12,
      marginTop: 0,
      marginBottom: 0,
    },
    // tabbar 的样式
    style: {
      //这个也可以去掉下划线
      marginBottom: -2,
      backgroundColor: '#FCFCFC',
      // tabbar 顶部线条颜色
      borderTopColor:'#e3e3e3',
      // 线条颜色宽度
      borderTopWidth:1
    },
    //下划线的高度为0 也就可以去掉下划线
    indicatorStyle:{
      height:0
    }
  },
}
)

注释已经非常清楚，不解释，不废话，直接看效果

wx_tab_02.png

怎么样，我们基本上就达到了，微信的效果，并且可以滑动

9、新建通讯录、发现、我的界面

• 新建四大 tab 对应界面的组件

上面的代码中，通讯录、发现、我的界面，我们都使用的是 Home ,接下来我们把四个 tab 对应的组件单独创建出来 , 接下来我们把这几个界面创建出来,如下图我们新增内容「红色框中」

other_three_tab.png

以通讯录为例子，其它一样

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';

/**
 * 通讯录界面
 * @author TigerChain
 * @type {Object}
 */
export default class Contact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>通讯录</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

• 把四大 tab 对应组件引入 Main.js

如下图所示,核心代码修改，Main.js 中原有的 Home 组件就可以干掉了，其中红框中是新添加的

merge_tab_component.png

然后把各自的 tab 对应的界面配置到 TabNavigator 中,如下图红色框修改

modify_tab_screen.png

好了，运行查看效果

wx_basic_frame.gif

基本上像那么一回事了

10、tab 中图片组件的封装，并添加消息

• 1、在 app 中新建 component 目录，并新建 TabBarIcon.js 组件

import React, { PureComponent } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image
} from 'react-native';

/**
 * @author TigerChain
 * @type {Object}
 * 自定义 tab 组件
 */
export default class TabBarIcon extends PureComponent {

  render() {
     // 图片是否选中
    let selectedImage = this.props.selectedImage?this.props.selectedImage:this.props.normalImage
    return (
      <View>
        <Image
          source = {this.props.focused?selectedImage:this.props.normalImage}
          style={{ width: 25, height: 25 }}
        />
        {/* 消息提示 */}
        {
          this.props.badgenum?
          <View style={{ position: 'absolute', right: 1, top: 1, backgroundColor: 'red', borderRadius: 9, width:13, height: 13, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ color: 'white' }}>{this.props.badgenum}</Text>
          </View>:null
        }
      </View>
     );
  }
}

• 2、把 TabBarIcon.js 引入到 Main.js 中并修改

如下图所示替换到原来的 Image 为 TabBarIcon 即可

tabbar_icon_com.png

• 3、运行查看效果,部分截图

last_result.png

这样我们基本上就把微信的基本框架搭建完了，后面就是细化每个 tab 对应的组件以及子组件

四、我们学到了什么

• 通过这节，我们基本就上入门了 react-navigation
• 图片组件文本组件的应用
• TabNavigator 的配置
• 组件的封装

到此为止我们的 RN 微信的基本框架「基本上是手把手写的」就完成了，后面陆续会推出后面的功能.据说想成为牛 B 的人都会点赞的

以后文章会第一时间发在公号，扫描添加即可关注

公众号：TigerChain