如有转载，请申明：转载自 IT天宇： http://www.jianshu.com/p/bdad2cd06413
前言
由于工作和学习原因，几个月没写博客了。
博主在使用 React Native 的 TabNavigator 时，发现一些小问题，查了很久资料也没查到，最后自己摸索实验了好久，总算实现了。
我想要这样的效果：
实际上，默认是这样的：
原因
What？ 怎么开始写 React Native 的教程了？
由于工作需要，最近转向学习 React Native，只能一句话形容 “根本停不下来”。好吧， app 转 java 狗之路走得真曲折。
目录
1. 引入 TabNavigator
现在官方推荐使用的导航组件是 React Navigation
安装
npm install --save react-navigation
导入
import {
TabNavigator,
} from 'react-navigation';
感叹 ES6 写法简洁而强大。
2. 加上 TabItem
编写 Item
为了显示 4 个平行的界面，我们需要写 4 个组件。
这里直接写 4 个只含有 Text 的组件。
Home.js
import React, {Component} from 'react';
import {
Text,
} from 'react-native';
export default class Home extends Component {
render() {
return (
<Text>首页</Text>
)
}
}
Find.js / Message.js / Me.js
和 Home.js 几乎一样，只是把 <Text>首页</Text> 中的文字改成相应的。
使用 TabNavigator
先导入需要的组件，包括上面自己写的 4 个 Item
import React, {Component} from 'react';
import {
StyleSheet,
Image,
} from 'react-native';
import {
TabNavigator,
} from 'react-navigation';
import Home from './Home'
import Find from './Find'
import Message from './Message'
import Me from './Me'
然后写一个组件来使用 TabNavigator
export default class Start extends Component {
render() {
const Tabs = TabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon: ({tintColor}) => <Image
style={[styles.tabBarImage, {tintColor: tintColor}]}
source={require('./images/tabbar_home.png')}/>,
}
},
Find: {
screen: Find,
navigationOptions: {
tabBarLabel: '发现',
tabBarIcon: ({tintColor}) => <Image
style={[styles.tabBarImage, {tintColor: tintColor}]}
source={require('./images/tabbar_find.png')}
/>,
}
},
Message: {
screen: Message,
navigationOptions: {
tabBarLabel: '消息',
tabBarIcon: ({tintColor}) => <Image
style={[styles.tabBarImage, {tintColor: tintColor}]}
source={require('./images/tabbar_message_center.png')}
/>,
}
},
Me: {
screen: Me,
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({tintColor}) => <Image
style={[styles.tabBarImage, {tintColor: tintColor}]}
source={require('./images/tabbar_me.png')}
/>,
}
}
},
{
animationEnabled: true,
tabBarPosition: 'bottom',
swipeEnabled: true,
backBehavior: 'none',
tabBarOptions: {
activeTintColor: 'orange',
inactiveTintColor: 'gray',
showIcon: true,
indicatorStyle: {
height: 0,
},
style: styles.tabBar,
tabStyle: styles.tabBarItem,
labelStyle: styles.tabBarLabel,
pressColor: 'gray',
pressOpacity: 0.8,
upperCaseLabel: false,
},
}
)
return (
<Tabs/>
)
}
}
const styles = StyleSheet.create({
tabBarImage: {
width: 24,
height: 24,
},
tabBar: {
backgroundColor: 'white',
},
tabBarLabel: {
fontSize: 12,
},
tabBarItem: {
height: 56,
},
})
没错，和你网上看到的教程几乎一样，这个时候把这个组件渲染运行的话，就是上面看到的默认的情况。
3. 修改样式达到 Material Design 要求
上面显然不是想要的效果，MD规范为：整体高度 56dp，未选中的时候，图标 24dp，距离顶部 8dp；文字距离底部 8dp，距离图标 6dp。
为了达到 MD 的规范，我们需要修改一下。
在 tabBarOptions 属性中加入图标的样式
iconStyle: styles.tabBarIcon,
然后在样式中做如下修改
tabBarImage: {
width: 24,
height: 24,
marginTop: 8,
},
tabBarIcon: {
height: 32,
},
tabBarLabel: {
fontSize: 12,
marginBottom: 8,
marginTop: 6,
},
tabBarImage 中增加了 marginTop
增加样式 tabBarIcon
tabBarLabel 中增加了 marginTop, marginBottom
