React Native学习之TabBarIOS用法

来源：互联网发布：织梦文章分页 index 编辑：程序博客网时间：2024/05/23 01:12

过年开始正式学习React Native,至于React Native是什么,在这就不说废话了,学习的话,可以去React Native中文网:React Native中文网

由于是新的开发方式,官方给的例子又很操蛋,好多控件和API的用法都介绍的很操蛋,所以学习过程中遇到了很多问题,TabBarIOS的使用就是一个,使用了之后push的时候怎么隐藏TabBarIOS,就是重点;

废话不多说,上代码:

1.这是在路口类index.ios.js里的调用

'use strict';import HomePage from './HomePage'import React, { AppRegistry, Component, StyleSheet,} from 'react-native';class XGTabbarDemo extends Component {  render (){    return (      <HomePage style={{flex:1}} />    );  }}AppRegistry.registerComponent('XGTabbarDemo', () => XGTabbarDemo);

2.这是设置有TabBarIOS页面

// HomePage 有TabBarIOS页面// create by 小广'use strict';import React, {  View ,  Component,  StyleSheet,  Navigator,  TabBarIOS,} from 'react-native';// tabbar的主模块import MainVC from './MainVC'import SecondVC from './SecondVC'import ThreeVC from './ThreeVC'export default class HomePage extends Component {  constructor(props) {    super(props);  }  render(){    // Navigator的用法,请参考: http://bbs.reactnative.cn/topic/20    return (      <Navigator        style={{flex:1}}        initialRoute={{name:'TabbarView',component:TabbarView}}        renderScene={this._renderNavSubComponent.bind(this)}/>    );  }  // 返回的NavSubComponent  _renderNavSubComponent(route, navigator){    var NavSubComponent = route.component;    if (NavSubComponent) {      return <NavSubComponent {...route.params} navigator={navigator}/>    }  }}// 定义TabbarViewconst tabBarTintColor = '#f8f8f8';// 标签栏的背景颜色const tabTintColor = '#3393F2'; // 被选中图标颜色const navBarTintColor = '#EEEFF4';//导航条颜色const navItemTintColor = '#66666';// 导航条按钮字体颜色const navTextColor = '#66666';// 导航条title字体颜色class TabbarView extends Component{  constructor(props) {    super(props);    this.state = {      selectedTab:'firstVC',    };  }  render(){    return (      <TabBarIOS        ref='tabbar'        tintColor={tabTintColor}        barTintColor={tabBarTintColor}>       {this._createTabbarItem('首页',require('./iconOne.png'),'firstVC')}       {this._createTabbarItem('第二页',require('./iconTwo.png'),'secondVC')}       {this._createTabbarItem('第三页',require('./iconThree.png'),'threeVC')}      </TabBarIOS>    );  }  // 创建TabBarIOS.Item  _createTabbarItem(title,icon,selectedTab){    return (      <TabBarIOS.Item        title={title}        icon={icon}        selected={this.state.selectedTab === selectedTab}        onPress={() => {          this.setState({            selectedTab:selectedTab,          });        }}>        {this._renderComponent(this.state.selectedTab)}      </TabBarIOS.Item>    );  }  // 根据selectedTab 确定模块  _renderComponent(selectedTab){    if (selectedTab === 'firstVC') {      return <MainVC navigator={this.props.navigator} />    } else if (selectedTab === 'secondVC') {      return <SecondVC navigator={this.props.navigator} />    } else if (selectedTab === 'threeVC') {      return <ThreeVC navigator={this.props.navigator} />    }  }}

有比这个解决方法更好的大神,就留下您的建议

0 0