React Native（iOS）新手小白零基础自学（七）TabBarIOS组件

/*
  TabBarIOS组件属性比较少，主要有3个：
      1.barTintColor：Tab栏的背景颜色
      2.tintColor：但我们选中某个Tab时，该Tab的图标的颜色
      3.translucent：Tab栏是否透明
    TabBarIOS.Item组件是TabBarIOS组件的某一项Tab，支持如下属性：
        1.badge：右上角红色的提示数字
        2.icon：Tab的图标，如果不指定，默认显示系统图标
        3.onPress：点击事件。当某个Tab被选中时，需要改变该组件的selected={true}设置
        4.selected:是否选中某个Tab，如果其值为true，则选中并且显示子组件
        5.selectedIcon:选中状态的图标，如果为空，则将图标变为蓝色
        6.systemIcon：系统图标，其值是枚举类型，可选值有'bookmarks'、'contacts'、'downloads'、'favorites'、
                      'featured'、'history'、'more'、'most-recent'、'most-viewed'、'recents'、'searh'、'top-rated'
        7.title：图标底部的标题，使用系统图标时会忽略该标题
*/

这里以QQ Tab切换为例，如图：

首先加载TabBarIOS组件，然后使用TabBarIOS和TabBarIOS.Item进行布局。

D5603D73-2C47-4639-AD18-E98B910C86D4.png

/*
  图片地址：下载到本地使用
  http://vczero.github.io/ctrip/message.png
  http://vczero.github.io/ctrip/phone.png
  http://vczero.github.io/ctrip/star.png
*/
var React = require('react-native');

var Dimensions = require('Dimensions');

var {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView,
  TabBarIOS,
} = React;
/*
  初始化时添加一个属性：this.state.tab   tab表示当前选中的TabBarIOS.Item字符串名称。我们在selected上做一个简单的判断
  selected={this.state.tab === 'message'}，如果想等，则说明选中。一般我们通过点击触发选中，所以添加onPress事件，传递
  不同的字符串来修改this.state.tab，从而触发选中。
  Dimensions获取屏幕宽高
*/
var APP = React.createClass ({

  getInitialState: function() {
    return {
      tab: 'message'
    };
  },

  select: function(tabName) {
    this.setState({
      tab: tabName
    });
  },

  render: function() {
    return (
      <TabBarIOS style={styles.flex}>
        <TabBarIOS.Item title="消息"
                        icon={require("image!message")}
                        onPress={this.select.bind(this, 'message')}
                        selected={this.state.tab === 'message'}>
          <ScrollView>
            <View style={styles.message}>
              <Text style={styles.messageTitle}>南山南</Text>
              <Text>
                你在南方的艳阳里 大雪纷飞
                我在北方的寒夜里 四季如春
                如果天黑之前来的及
                我要忘了你的眼睛
                穷极一生 做不完一场梦
                他不在和谁谈论相逢的孤岛
                因为心里早已荒无人烟
                他的心里在装不下一个家
                做一个只对自己说谎的哑巴
                他说你任何为人称道的美丽
                不及他第一次遇见你
                时光苟延残喘 无可奈何
                如果所有土地连在一起
                走上一生只为拥抱你
                喝醉了他的梦 晚安
                你在南方的艳阳里 大雪纷飞
                我在北方的寒夜里 四季如春
                如果天黑之前来的及
                我要忘了你的眼睛
                穷极一生 做不完一场梦
                大梦初醒荒唐了一生
                南山南 北秋悲
                南山有谷堆
                南风喃 北海北
                北海有墓碑
                南山南 北秋悲
                南山有谷堆
                南风喃 北海北
                北海有墓碑
                北海有墓碑
              </Text>
            </View>
          </ScrollView>
        </TabBarIOS.Item>
        <TabBarIOS.Item title="联系人"
                        icon={require("image!phone")}
                        onPress={this.select.bind(this, 'phoneList')}
                        selected={this.state.tab === 'phoneList'}>
          <ScrollView>
            <Text style={styles.list}>
              <Text>唐三藏</Text>
              <Text>131-8904-9077</Text>
            </Text>
            <Text style={styles.list}>
              <Text>孙悟空</Text>
              <Text>131-8904-9078</Text>
            </Text>
            <Text style={styles.list}>
              <Text>猪悟能</Text>
              <Text>131-8904-9079</Text>
            </Text>
            <Text style={styles.list}>
              <Text>沙悟净</Text>
              <Text>131-8904-9080</Text>
            </Text>
          </ScrollView>
        </TabBarIOS.Item>
        <TabBarIOS.Item title="动态"
                        icon={require("image!star")}
                        onPress={this.select.bind(this, 'star')}
                        selected={this.state.tab === 'star'}>
          <ScrollView style={styles.flex}>
            <Image style={styles.imageSize}
                   source={{uri:'http://vczero.github.io/ctrip/star_page.jpg'}}/>

          </ScrollView>
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

var styles = StyleSheet.create ({
  flex: {
    flex:1
  },
  message: {
    alignItems:'center',
    marginLeft:5,
    marginRight:5
  },
  messageTitle: {
    fontSize:18,
    color:'#18b5ff',
    marginBottom:5
  },
  list: {
    height:30,
    fontSize:15,
    marginLeft:10,
    marginTop:10
  },
  imageSize: {
    width:Dimensions.get('window').width,
    height:Dimensions.get('window').height - 70
  }
});

AppRegistry.registerComponent('InformationServicesRN', () => APP);