版权声明：本文为博主原创文章，未经博主允许不得转载
PS:转载请注明出处
作者: TigerChain
地址: http://www.jianshu.com/p/8743156d3b61
本文出自 TigerChain 简书 RN 系列
教程简介
-
1、阅读对象
本篇教程适合新手阅读，老手直接略过
-
2、教程难度
初级
3、Demo 地址
https://github.com/tigerchain/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
这一小节我们先实现微信的基本框架如下图：
一、简单分析
我们来简单的分析一下微信的界面
- 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 中搜索的结果
不管三七二十八，我们打开再说地址是：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 ,具体可以看我原来的文章 React系列之--使用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 微信的基本框架「基本上是手把手写的」就完成了，后面陆续会推出后面的功能.据说想成为牛 B 的人都会点赞的
以后文章会第一时间发在公号，扫描添加即可关注
公众号：TigerChain
