React Native－11.React Native TabBarIOS TabBarIOS.Item组件详解

TabBarIOS组件简介

等同于iOS中的UITabBar
TabBarIOS 组件属性介绍：

• barTintColor: Tab栏的背景颜色。
• tintColor : 当我们选中了某一个Tab时，该Tab的图标颜色。
• translucent ： Tab栏是否透明。

TabBarIOS.Item组件简介

等同于iOS中UITabBarItem

• badge : 红色的提示数字，可以用作消息提醒。
• icon：Tab的图标，如果不制定，默认显示系统图标。
• onPress：点击事件。当某个Tab被选中时，需要改变该组件的selected＝｛true｝设置。
• selectedIcon : 选中状态的图标，如果为空，则将图标变为蓝色。
• systemIcon：系统图标，其值是枚举类型，可选值有bookmarks、contacts、downloads、favorites、featured、history、more、most－recent、most－viewed、recents、search、top－rated。
• title：标题。他会出现在图标底部，当我们使用了系统图标时，将会忽略该标题。

来个demo：尝尝鲜儿

代码：

'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TabBarIOS,
} = React;

var MyImage = React.createClass({
    getInitialState : function(){
        var imgs = this.props.imgs;
        return{
            imgs : imgs,
            count : 0,
            };
    },
    goNext : function(){
        var count = this.state.count;
        count++;
        if(count < imgs.length){
            this.setState({
                count: count
            });
        }
    },
    goPreview: function() {
        var count = this.state.count;
        count--;
        if(count >= 0){
            this.setState({
                count:count
            });
        }
    },
    render: function(){
        return(
            25}]}>
                
                    this.state.imgs[this.state.count]}}
                           resizeMode = "contain">
                
                
                    this.goPreview}
                        style = {[styles.btn]}>
                            
                            上一张
                                             
                    
                    this.goNext}
                        style = {[styles.btn]}>                         
                            
                            下一张
                            
                    
                

            
            );
    }
})

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height - 70;


var styles = StyleSheet.create({
    flex : {
        flex: 1,
    },

    message : {
        fontSize : 18,
        color: '#18b5ff',
        marginBottom: 5,
    },

    message_title: {
        fontSize: 18,
        color:'#18b5ff',
        marginBottom : 5,
    },
    list: {
        height: 30,
        fontSize : 15,
        marginLeft: 10,
        marginTop: 10,
    },
})

var wxsPrj = React.createClass({
  getInitialState : function() {
    return{
        tab: 'message'
    };
  },

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

  render: function() {
    return (
        '#ffff22'>
            "位置"
                            icon = {require('image!marker')}
                            onPress = {this.select.bind(this,'message')}
                            selected = {this.state.tab === 'message'}>
                            
                                
                                    TabBarIOS Test
                                
                                
                                    这是一个测试TabBarIOS 的demo
                                
                            
            
            "联系人"
                            icon = {require('image!user')}
                            onPress = {this.select.bind(this,'phoneList')}
                            badge = "5"
                            selected = {this.state.tab === 'phoneList'}>
                            
                                
                                    王小二
                                
                                
                                    18900000000
                                
                                
                                    王小三
                                
                                
                                    18900000001
                                
                                
                                    王小四
                                
                                
                                    18900000002
                                
                            
            
            "动态"
                icon = {require('image!hearts')}
                onPress = {this.select.bind(this,'star')}
                selected = {this.state.tab === 'star'}>
                
                    'http://ww4.sinaimg.cn/bmiddle/684e8299gw1f139744lfwj20c80c8abo.jpg'}}/>
                
            
        
    );
    }
});

AppRegistry.registerComponent('wxsPrj', () => wxsPrj);

我们会发现icon = {require(‘image!hearts’)} ，这里都是本地的，是因为，RN不支持远程图片，我觉得这一点很不好，不知道有没有解决办法。

附上三张图片的下载地址
联系人：
‘http://ww4.sinaimg.cn/square/006bdQ7qjw1f14h428p3jj300p00p0sh.jpg‘,
坐标：
‘http://ww4.sinaimg.cn/square/006bdQ7qjw1f14h435x6sj300p00p3y9.jpg‘,
动态：
‘http://ww3.sinaimg.cn/square/006bdQ7qjw1f14h44pk3wj300p00p0sh.jpg‘,

Dimensions

是一个处理尺寸的工具类，里边的api我们以后再学习，主要我也不会。。。