03、RN 微信项目001-基本框架

TigerChain
251 阅读9分钟

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

教程简介

  • 1、阅读对象

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

  • 2、教程难度

    初级

  • 3、Demo 地址

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

如果喜欢就给个 start 吧

正文

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

无图无真相，废话不多说，先看看我们使用 RN 写的微信客户端，这是最终的效果「由于 gif 大于 2M 上传不了，所以象征性的放几个图片吧，只是截取了几张而已，后面继续完善」

    

    

    

    

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

一、简单分析

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

  • 1、微信就是传统的 TAB+导航界面完成的

  • 2、微信的整体框架可以分为三个部分，上部分是 TitleBar「1」,中间中内容体「2」，底部是 Tab 选项卡「3」

  • 3、微信在 tab 切换过程中，TitleBar「 图中所示 1 」是固定不变的

二、技术选型

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

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

2、继续在官网上找

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

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

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

在 npm 中搜索的结果

yarn

在 yarn 中搜索的结果

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

4、开始整吧

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

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

三、开始撸码

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

mkdir wxdemo
cd wxchat 
react-native init wxchat

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

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

react-native run-android

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

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

3、添加 React Navigation

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

在命令行中输入

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

建议使用 yarn ,具体可以看我原来的文章：使用 yarn 包来管理工具

这样我就成功的安装了 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 中是用来放 RN 组件的，imgs 中是用来放本地图片的

5、准备 tab 的图片

我们将准备好的图片放到 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,
  }
});

运行查看结果：

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

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

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

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

我们再运行查一下效果

在这里我载取了一部分图，说明问题即可，我们成功的把 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
    }
  },
}
)

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

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

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

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

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

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

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 组件就可以干掉了，其中红框中是新添加的

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

好了，运行查看效果

基本上像那么一回事了

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 即可

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

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

四、我们学到了什么

  • 通过这节，我们基本就上入门了 react-navigation

  • 图片组件文本组件的应用

  • TabNavigator 的配置

  • 组件的封装

到此为止我们的 RN 微信的基本框架「基本上是手把手写的」就完成了，后面陆续会推出后面的功能

以后文章会第一时间发在公号，长按即可关注

关注我

长按下图识别图中二维码或是扫描添加即可关注

公众号：TigerChain

avatar
文章
阅读
粉丝