React Native中TabBarIOS的简单使用方法示例

import React, { Component } from 'react';import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, TouchableHighlight, Platform,} from 'react-native';//首先导入需要的组件import Home from './home';import About from './about';import Manager from './manager';import Message from './message';//这里是导入需要显示的页面export default class Test extends Component { constructor(props){   super(props);   this.state = {    selectedTab:'home',    data:'',    isLoadingShow: false,    title:'首页',   };  }//设置一个初始化默认首先显示首页componentDidMount() { console.log("++++++++++++++++TabBarIOS测试+++++++++++++++"); }_selectTab(tabName) { this.setState({  selectedTab: tabName }); }//修改底部Tab名称,通过状态进行控制_selectTitle(title) { this.setState({  title: title }); }//修改顶部导航栏的名称,与Tab名称的修改是同步的_addNavigator(component, title) { let data = null; if(title === '公告'){  data = this.state.data; } return <NavigatorIOS  style={{flex:1}}  barTintColor='#007AFF'  titleTextColor="#fff"  tintColor="#fff"  translucent={false}  initialRoute={{   component,   title,   passProps:{   data   }  }}  />; }//这里定义了一个_addNavigator方法,接收两个参数页面名称与导航栏title_mainJudge(){  return(   <View style={{flex:1}}>    <TabBarIOS barTintColor="#FFF">    <TabBarIOS.Item     icon={require('../imgs/phone_s.png')}     title="首页"     selected={this.state.selectedTab === 'home'}     onPress={this._selectTab.bind(this, 'home')}     >     {this._addNavigator(Home, '首页')}    </TabBarIOS.Item>    <TabBarIOS.Item     title="公告"     icon={require('../imgs/gonggao.png')}     selected={this.state.selectedTab === 'message'}     onPress={this._selectTab.bind(this, 'message')}     >     {this._addNavigator(Message, '公告')}    </TabBarIOS.Item>    <TabBarIOS.Item     title="管理"     icon={require('../imgs/manager.png')}     selected={this.state.selectedTab === 'manager'}     onPress={this._selectTab.bind(this, 'manager')}     >     {this._addNavigator(Manager, '管理')}    </TabBarIOS.Item>    <TabBarIOS.Item     title="关于"     icon={require('../imgs/about.png')}     selected={this.state.selectedTab === 'about'}     onPress={this._selectTab.bind(this, 'about')}     >     {this._addNavigator(About, '关于')}    </TabBarIOS.Item>    </TabBarIOS>   </View>    )}//_mainJudge方法是最核心的方法,用于对底部Tab以及顶部Title的布局,其中调用了几个方法上面已经做了说明. render() { return (  <View style={styles.container}>   {this._mainJudge()}  </View> ); }}const styles = StyleSheet.create({ container:{ flex:1, opacity:1 },});