React Native底|顶部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNative0.44版本以后已经被移除了。
好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且ReactNative官方更推荐我们使用此组件。
本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳我。
简介
react-navigation主要包括导航,底部tab,顶部tab,侧滑等,分别为:
- 导航 -> StackNavigator
- 底部或者顶部tab -> TabNavigator
- 侧滑 -> DrawerNavigator
我们今天主要讲TabNavigator。
效果展示
实现代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Button,
Text,
View,
Image,
StatusBar
} from 'react-native';
import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation"; class Home extends React.Component {
static navigationOptions = {
tabBarLabel: '热点',
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>!这是热点</Text>
</View>
);
}
} class Circle extends React.Component {
static navigationOptions = {
tabBarLabel: '圈子',
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>!这是圈子</Text>
</View>
);
}
} class Tools extends React.Component {
static navigationOptions = {
tabBarLabel: '工具',
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>!这是工具</Text>
</View>
);
}
} class Mypage extends React.Component {
static navigationOptions = {
tabBarLabel: '我的',
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
)
};
render() {
return (
<View style={styles.container}>
<Text>!这是我的</Text>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
}
}); const MyApp = TabNavigator(
{
Home: {
screen: Home,
},
Circle: {
screen: Circle,
},
Tools: {
screen: Tools,
},
Mypage: {
screen: Mypage,
},
},
{
tabBarOptions: {
activeTintColor: '#4BC1D2',
inactiveTintColor: '#000',
showIcon: true,
showLabel: true,
upperCaseLabel: false,
pressColor: '#823453',
pressOpacity: 0.8,
style: {
backgroundColor: '#fff',
paddingBottom: 0,
borderTopWidth: 0.5,
borderTopColor: '#ccc',
},
labelStyle: {
fontSize: 12,
margin: 1
},
indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
},
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
backBehavior: 'none',
}); module.exports = MyApp;
配置说明
NavigationOptions
当然,通过NavigationOptions来配置我们的tabBarItem:
title - 标题
tabBarVisible - 是否可见
tabBarIcon - 配置图片,当然,完全可以不使用图片
tabBarLabel - 也是配置标题,只不过title既能配置tab的标题,也能配置navigation的标题
TabNavigatorConfig
tabBarComponent- 用作标签栏的组件,例如 (这是iOS上的默认设置), (这是Android上的默认设置)TabBarBottomTabBarTop
tabBarPosition- 标签栏的位置可以是或'top''bottom'
swipeEnabled - 是否允许在标签之间进行滑动
animationEnabled - 是否在更改标签时动画
lazy - 是否根据需要懒惰呈现标签,而不是提前制作
tabBarOptions - 配置标签栏,如下所示。
几个选项被传递到底层路由器来修改导航逻辑:
initialRouteName - 首次加载时初始标签路由的routeName
order - 定义选项卡顺序的routeNames数组
paths - 将routeName映射到路径配置,该配置将覆盖routeConfigs中设置的路径。
backBehavior - 后退按钮是否会使Tab键切换到初始选项卡?如果是,否则设置。默认为行为。initialRoutenoneinitialRoute
tabBarOptions for (iOS上的默认标签栏)TabBarBottom
activeTintColor - 活动标签的标签和图标颜色
activeBackgroundColor - 活动选项卡的背景颜色
inactiveTintColor - 非活动标签的标签和图标颜色
inactiveBackgroundColor - 非活动标签的背景颜色
showLabel - 是否显示标签的标签,默认为true
style - 标签栏的样式对象
labelStyle - 标签标签的样式对象
tabStyle - 标签的样式对象
tabBarOptions for (Android上的默认标签栏)TabBarTop
activeTintColor - 活动标签的标签和图标颜色
inactiveTintColor - 非活动标签的标签和图标颜色
showIcon - 是否显示标签的图标,默认值为false
showLabel - 是否显示标签的标签,默认为true
upperCaseLabel - 是否使标签大写,默认为true
pressColor - 材质波纹颜色(Android> = 5.0)
pressOpacity - 按压标签的不透明度(iOS和Android <5.0 only)
scrollEnabled - 是否启用可滚动选项卡
tabStyle - 标签的样式对象
indicatorStyle - 标签指示器的样式对象(选项卡底部的行)
labelStyle - 标签标签的样式对象
iconStyle - 标签图标的样式对象
style - 标签栏的样式对象
小技巧
1.去掉安卓下的下划线,设置:tabBarOptions => indicatorStyle:{ height: 0 };
2.底部导航在导航最上方添加一条分割线,设置:tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc';
3.导航安卓图标和文字间隙比较大,手动调整小设置:tabBarOptions => labelStyle => margin: 0;
最新文章
- printf 命令
- android 进程间通信---Service Manager(1)
- 杭电ACM2096--小明A+B
- Eclipse创建Maven Web项目 + 测试覆盖率 + 常见问题(2015.07.14——湛耀)
- Symfony VarDumper Component
- webstorm 如何配置git
- storm的并发机制
- 安装nginx+ngx_lua支持WAF防护功能
- kbhit()
- 分布式锁实现秒杀 - 基于redis实现
- ubuntu window 10 双系统
- C# 键盘钩子
- [C++]3-1 得分(Score ACM-ICPC Seoul 2005,UVa1585)
- 关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复nginx最新漏洞CVE-2017-7529的解决方案
- 【原创 Hadoop&;Spark 动手实践 12】Spark MLLib 基础、应用与信用卡欺诈检测系统动手实践
- [转]MySQL group_concat设置group_concat_max_len
- LVS+Keepalived+Mysql+主主数据库架构[2台]
- C++进阶--RAII 资源获取即初始化
- [UE4]Delay与Retriggerable Delay
- [UE4]使用材质将图片变成黑白