React-Native项目中使用TabBar
来源:互联网 发布:u盘低格后数据恢复 编辑:程序博客网 时间:2024/06/05 14:24
之前的文章讲述了在RN项目中如何使用NavigationBar,如何调用原生模块,以及集成下拉刷新和上拉加载更多的功能,今天介绍一个第三方插件react-native-tab-navigator,讲述我是如何使用它在RN项目中使用TabBar
项目源码在这里
安装插件
npm install react-native-tab-navigator --save
使用
就我的demo来说:
Demo中包含了Navigator管理的一系列视图,我尝试过使用一个Tab
管理多个由Navigator
管理的一系列视图
(这跟我之前的iOS开发经验有关,在ios中Application
的根视图是TabBarController
,这个TabBarController
管理多个由NavigationController
管理的一系列ViewController
)但是这有一个问题:
场景切换的时候可能有隐藏TabBar的需求,按照刚才说的方法,我需要set一个值来控制tabbar的
height
和overflow
,又由于component
的生命周期函数中没有类似于iOS中-(void)viewWillAppear;
的方法,所以没有很好的方法把隐藏的tabbar再显示出来(如果你有解决这个问题的方法,请告诉我)。那么换一种思路:
把管理一系列视图的
Tab
交由一个Navigator
管理,虽然这样违背了iOS开发的普通思路,但是就目前在RN项目中,没有发现太大的问题(有一个问题是只有一级页面显示TabBar,所有二级页面全部不显示,不过就国内大多数应用设计风格来看,这个问题也不算是问题)。React-native-vector-icons
这是一个图标库,有兴趣话可以去这里深入了解,简单使用请执行下边两条命令即可$ npm install react-native-vector-icons --save $ rnpm link
使用:
import Icon from 'react-native-vector-icons/Ionicons'; <Icon name={ 'ios-home' }
关键部分代码
//root.js import React from 'react' import { Navigator } from 'react-native'; import { Provider } from 'react-redux' import configureStore from './store/store.js' import App from './containers/app.js' const store = configureStore(); class Root extends React.Component { render() { return ( <Provider store={ store }> //在原来<App />的基础上添加Navigator <Navigator initialRoute={{ component: App }} configureScene={(route) => { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }} /> </Provider> ); } } export default Root; //---------------------- //app.js ( render(){} ) render() { const { reducer } = this.props; console.log("============",reducer.tabbarHeight); return ( <TabNavigator tabBarStyle={{ backgroundColor:'white' }} style={{backgroundColor: 'white'}}> <TabNavigator.Item title="主页" selected={this.state.selectedTab === 'home'} renderIcon={() => <Icon name={ 'ios-home' } size={30} color={'gray'}/>} renderSelectedIcon={() => <Icon name={ 'ios-home' } size={30} color={'#4E78E7'}/>} onPress={() => this.setState({ selectedTab: 'home' })}> <ProductListContainer {...this.props} /> </TabNavigator.Item> <TabNavigator.Item title="其他" selected={this.state.selectedTab === 'other'} renderIcon={() => <Icon name={ 'ios-more' } size={30} color={'gray'}/>} renderSelectedIcon={() => <Icon name={ 'ios-more' } size={30} color={'#4E78E7'}/>} onPress={() => this.setState({ selectedTab: 'other' })}> <OtherContainer {...this.props}/> </TabNavigator.Item> </TabNavigator> ); }
效果图
- React-Native项目中使用TabBar
- React-Native项目中使用TabBar
- React-Native项目中使用动画-Animated
- React-native隐藏tabbar
- React-Native之TabBar
- React Native商城项目实战02 - 主要框架部分(tabBar)
- React Native关于TabBar使用自定义矢量位图的流程
- react native android使用react-native-tab-navigator来做底部导航tabbar(1)
- 在React Native项目中使用第三方库
- 使用CocoaPods 将 React Native 导入已有的项目中
- IOS-React Native 使用CocoaPods集成到原生项目中
- React-Native项目中使用Gif图做loading遮罩
- React-Native项目中使用Gif图做loading遮罩
- React Native 向iOS项目中添加React Native支持
- react native 中 使用 Redux
- react-native中使用underscore
- react-native中抽屉的使用(react-native-drawer)
- react native android使用react-native-tab-navigator来做底部导航tabbar(2)一个坑:navigator
- 机器学习的损失函数
- 整数中1出现的次数
- 2017湘潭赛XTU1267Highway
- [模板]poj3259(判断是否存在负环)
- vi三种模式
- React-Native项目中使用TabBar
- 树控件示例
- Python
- 国内人脸识别研究现状2010年之前
- 马氏距离+协方差公式+无偏估计
- Codeforces Round #423 (Div. 2) B. Black Square
- hdu 1398 Square Coins 母函数+完全背包
- jenkins之安装篇
- java 访问权限