TabBarIOS

参考:
http://blog.csdn.net/wmmhwj/article/details/68483592

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    ScrollView,
    TabBarIOS

} from 'react-native';

/*
*  在React Native 实现页面切换,提供两个组件: TabBarIOS 和TabBarIOS.Item
*
* 常用属性:
* selected: 是否选中了某个Tab
* title  标题
* barTintColor Tab栏的背景颜色
* icon 图标
* onPress 点击事件,当某个tab被选中时,需要改变组件的selected={true}设置
* 切换原理:点击tab时触发onPress方法,记录被点击tab的title,在通过title设置tab是否被选中(从而设置selected值 true/false)
*
*
* */

/*
*
* 导入textInput.js
* 导入loadimage.js
* 导入movieList.js movie.json
*
* */
var Page1 = require("./textInput");
var Page2 = require("./loadimage");
var Page3 = require("./movieList");

var LessionTabBarIOS = React.createClass({

    getInitialState:function () {
      return{
          //用于记录显示的页面组件的title
          tab:"Page1"//默认的
      }
    },
    //TabBarIOS.Item 的onPress处理方法
    select:function (tabName) {
      this.setState({
          tab:tabName
      })

    },

   render:function () {
       return(
         <TabBarIOS style={{flex:1}}>
             <TabBarIOS.Item
                 title="Page1"
                 icon={require("image!image1")}//图片直接放在了xcode的.asset 中
                 onPress={this.select.bind(this,"Page1")}
                 selected={this.state.tab==="Page1"}
             >
                 {/*//页面组件*/}
                 <Page1></Page1>
             </TabBarIOS.Item>
             <TabBarIOS.Item
                 title="Page2"
                 //使用系统的图片
                 systemIcon="bookmarks"
                 onPress={this.select.bind(this,"Page2")}
                 selected={this.state.tab==="Page2"}
             >
                 {/*//页面组件*/}
                 <Page2></Page2>
             </TabBarIOS.Item>
             <TabBarIOS.Item
                 title="Page3"
                 icon={require("image!image3")}//图片直接放在了xcode的.asset 中
                 onPress={this.select.bind(this,"Page3")}
                 selected={this.state.tab==="Page3"}
             >
                 {/*//页面组件*/}
                 <Page3></Page3>
             </TabBarIOS.Item>
         </TabBarIOS>
       );
   }

});

//////////-------ES6 语法-----////////////////////////////////////////////////////////////////////////////////////

/*导入组件*/

import OnePage from "./OnePage"
import TwoPage from "./TwoPage"

class ThreePage extends Component{
    render(){
        return(
            <View style={{backgroundColor:"red", flex:1}}>
              <Text>hello</Text>
            </View>
        )
    }
}

export default class App extends Component<{}> {
  constructor(props){
    super(props);
    this.state={
      tab:"One"
    }
　　　　　　//注意:需要通过 bind()  来指定 this, 否则指定不明确,无法调用函数  or  也可以在调用的时候直接绑定
    this.select = this.select.bind(this) 

  }
  select(tabTitle){
    this.setState({
        tab:tabTitle
    })
  }

  render() {
    return (
      <TabBarIOS  style={{flex:1,alignItems:"flex-end"}}
          >

        <TabBarIOS.Item 
　　　　　　title="Three" 
　　　　　　icon={require('./活动.png')} 
　　　　　　onPress={this.select.bind(this,'One')}  //调用的时候,直接绑定, 并传参数
　　　　　　seleted={this.state.tab==="Three"}>

          <View style={{backgroundColor:"red"}}>
            <Text>Hello</Text>
          </View>

        </TabBarIOS.Item>

        <TabBarIOS.Item title="Two" systemIcon="bookmarks"      onPress={this.select} seleted={this.state.tab==="Two"}>
          <TwoPage></TwoPage>
        </TabBarIOS.Item>

      </TabBarIOS>
    );
  }
}

注意: 有时,tabBar已经显示, 而页面没有渲染出来, 检查页面的布局 flex:1