react-native 自定义 TabBar
2024-09-28 01:08:06
1.首先补充一下以前的写法
App.js
/**
* 入口文件
*/ import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} from 'react-native';
// 导航
import {StackNavigator, TabNavigator, DrawerNavigator} from 'react-navigation';
// 图标
import Icon from 'react-native-vector-icons/Ionicons'; // 列表页
import ListScreen from './src/pages/creation/index';
// 编辑页
import EditScreen from './src/pages/edit/index';
// 用户页
import AccountScreen from './src/pages/acount/index';
// 图片页
import PictureScreen from './src/pages/picture/index'; // 创建详情页
import DetailScreen from './src/pages/creation/detail';
// 登录页
import LoginScreen from './src/pages/acount/login'; // tabbar item
class TabBarItem extends Component {
render() {
return (
<Image
style={{tintColor: this.props.tintColor, width: 25, height: 25}}
source={this.props.focused ? this.props.selectedImage : this.props.normalImage}
/>
)
}
} const Tab = TabNavigator(
{
List: {
screen: ListScreen,
navigationOptions: () => (
{
tabBarLabel: 'List',
tabBarIcon: ({tintColor, focused}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./src/assets/img/icon_tabbar_misc.png')}
selectedImage={require('./src/assets/img/icon_tabbar_misc_selected.png')}
/>
)
}
)
},
Edit: {
screen: EditScreen,
navigationOptions: () => (
{
tabBarLabel: 'Edit',
tabBarIcon: ({tintColor, focused}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./src/assets/img/icon_tabbar_mine.png')}
selectedImage={require('./src/assets/img/icon_tabbar_mine_selected.png')}
/>
)
}
)
},
Picture: {
screen: PictureScreen,
navigationOptions: () => (
{
tabBarLabel: 'Picture',
tabBarIcon: ({tintColor, focused}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./src/assets/img/icon_tabbar_merchant_normal.png')}
selectedImage={require('./src/assets/img/icon_tabbar_merchant_selected.png')}
/>
)
}
)
},
Account: {
screen: AccountScreen,
navigationOptions: ({navigation}) => (
{
tabBarLabel: 'Account',
tabBarIcon: ({tintColor, focused}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./src/assets/img/icon_tabbar_homepage.png')}
selectedImage={require('./src/assets/img/icon_tabbar_homepage_selected.png')}
/>
)
}
)
}
},
{
// 设置默认的页面组件
initialRouteName: 'Account',
// 设置tabbar的位置，iOS默认在底部，安卓默认在顶部。
tabBarPosition: 'bottom',
// 是否允许在标签之间进行滑动。
swipeEnabled: false,
// 是否在更改标签时显示动画。
animationEnabled: false,
// 在app打开的时候将底部标签栏全部加载，默认false,推荐改成true
lazy: true,
// 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
backBehavior: 'none',
tabBarOptions: {
// 文字和图片选中颜色
activeTintColor: '#ff8500',
// 文字和图片未选中颜色
inactiveTintColor: '#999',
// label和icon的背景色 未选中。
inactiveBackgroundColor: '#E8E5F8',
// 是否显示label，默认开启。
showLabel: true,
// android 默认不显示 icon, 需要设置为 true 才会显示
showIcon: true,
// 是否使标签大写，默认为true。
upperCaseLabel: false,
indicatorStyle: {
// 如TabBar下面显示有一条线，可以设高度为0后隐藏.
height: 0
},
style: {
// TabBar 背景色
backgroundColor: '#fff'
},
labelStyle: {
// 文字大小
fontSize: 10
}
}
}
); // 初始化StackNavigator
const Navigator = StackNavigator(
{
// 将TabNavigator包裹在StackNavigator里面可以保证跳转页面的时候隐藏tabbar
Tab: {
screen: Tab,
navigationOptions: {
header: null
}
},
Detail: {
screen: DetailScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
}
},
{
//initialRouteName: 'Login'
initialRouteName: 'Tab'
}
); const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
center: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
}); export default Navigator;
其他页面，例如：src/pages/creation/index
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export default class Creation extends Component {
render() {
return (
<View style={styles.container}>
<Text>Creation page</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center'
}
});
效果图：
警告：Method 'jumpToIndex' is deprecated.Please upgrade your code to use 'jumpTo' instead.
原因：TabNavigator已经被遗弃了，使用createBottomTabNavigator或者createMaterialTopTabNavigator，对应的标签栏位置。
2.现在的写法
/**
* 入口文件
*/ import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} from 'react-native';
// 导航
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
// 图标
import Icon from 'react-native-vector-icons/Ionicons'; // 列表页
import ListScreen from './src/pages/creation/index';
// 编辑页
import EditScreen from './src/pages/edit/index';
// 用户页
import AccountScreen from './src/pages/acount/index';
// 图片页
import PictureScreen from './src/pages/picture/index'; // 创建详情页
import DetailScreen from './src/pages/creation/detail';
// 登录页
import LoginScreen from './src/pages/acount/login'; // tabbar item
class TabBarItem extends Component {
render() {
return (
<Image
style={{tintColor: this.props.tintColor, width: 25, height: 25}}
source={this.props.focused ? this.props.selectedImage : this.props.normalImage}
/>
)
}
} const Tab = createBottomTabNavigator(
{
List: {
screen: ListScreen,
navigationOptions: () => (
{
tabBarLabel: 'List',
tabBarIcon: ({tintColor, focused}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./src/assets/img/icon_tabbar_misc.png')}
selectedImage={require('./src/assets/img/icon_tabbar_misc_selected.png')}
/>
)
}
)
},
Edit: {
screen: EditScreen,
navigationOptions: () => (
{
tabBarLabel: 'Edit',
tabBarIcon: ({tintColor, focused}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./src/assets/img/icon_tabbar_mine.png')}
selectedImage={require('./src/assets/img/icon_tabbar_mine_selected.png')}
/>
)
}
)
},
Picture: {
screen: PictureScreen,
navigationOptions: () => (
{
tabBarLabel: 'Picture',
tabBarIcon: ({tintColor, focused}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./src/assets/img/icon_tabbar_merchant_normal.png')}
selectedImage={require('./src/assets/img/icon_tabbar_merchant_selected.png')}
/>
)
}
)
},
Account: {
screen: AccountScreen,
navigationOptions: ({navigation}) => (
{
tabBarLabel: 'Account',
tabBarIcon: ({tintColor, focused}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./src/assets/img/icon_tabbar_homepage.png')}
selectedImage={require('./src/assets/img/icon_tabbar_homepage_selected.png')}
/>
)
}
)
}
},
{
// 设置默认的页面组件
initialRouteName: 'Account',
// 设置tabbar的位置，iOS默认在底部，安卓默认在顶部。
tabBarPosition: 'bottom',
// 是否允许在标签之间进行滑动。
swipeEnabled: false,
// 是否在更改标签时显示动画。
animationEnabled: false,
// 在app打开的时候将底部标签栏全部加载，默认false,推荐改成true
lazy: true,
// 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
backBehavior: 'none',
tabBarOptions: {
// 文字和图片选中颜色
activeTintColor: '#ff8500',
// 文字和图片未选中颜色
inactiveTintColor: '#999',
// label和icon的背景色 未选中。
inactiveBackgroundColor: '#fff',
// 是否显示label，默认开启。
showLabel: true,
// android 默认不显示 icon, 需要设置为 true 才会显示
showIcon: true,
// 是否使标签大写，默认为true。
upperCaseLabel: false,
indicatorStyle: {
// 如TabBar下面显示有一条线，可以设高度为0后隐藏.
height: 0
},
style: {
// TabBar 背景色
backgroundColor: '#fff'
},
labelStyle: {
// 文字大小
fontSize: 10
}
}
}
); // 初始化StackNavigator
const Navigator = createStackNavigator(
{
// 将TabNavigator包裹在StackNavigator里面可以保证跳转页面的时候隐藏tabbar
Tab: {
screen: Tab,
navigationOptions: {
header: null // 顶部导航很多都会自己自定义，这里就为空
}
},
Detail: {
screen: DetailScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
}
},
{
//initialRouteName: 'Login'
initialRouteName: 'Tab' // 默认出现的Tab页面
}
); const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
center: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
}); export default Navigator;
注：
import {StackNavigator, TabNavigator, DrawerNavigator} from 'react-navigation';
改为
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
最新文章
- C++中虚析构函数的作用
- Netsharp快速入门(之13) 销售管理(单据流转 销售订单生成发货单)
- uva 10120
- UVALive 2238 Fixed Partition Memory Management（二分完美匹配）
- java新手笔记29 读取文件
- JVM并发机制的探讨——内存模型、内存可见性和指令重排序
- 富文本编辑器CKEDITOR的使用配置(问题注解)
- js 的try catch
- typedef void(*Fun)(void);
- 3D中的旋转变换
- Python基础之面向对象进阶一
- 饮冰三年-人工智能-linux-08 软件包管理（Python的安装）
- 洛谷P1742 最小圆覆盖(计算几何)
- 3.8Python数据处理篇之Numpy系列(八)---Numpy的梯度函数
- asp.net webform/mvc导出Excel通用代码
- 使用 ReentrantLock 和 Condition 实现一个阻塞队列
- WordPress主题开发实例：显示最新发表文章
- 2018.07.09 洛谷P2365 任务安排（线性dp）
- 虚拟机VMware中的CentOS字符界面和图形界面切换
- 【WPF】Window窗体禁用最大化/最小化按钮