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(
            <View style = {[styles.flex,{marginTop: 25}]}>
                <View style = {[styles.image]}>
                    <Image style = {styles.img}
                           source = {{uri:this.state.imgs[this.state.count]}}
                           resizeMode = "contain"></Image>
                </View>
                <View style = {styles.btns}>
                    <TouchableOpacity onPress = {this.goPreview}
                        style = {[styles.btn]}>
                            <Text>
                            上一张
                            </Text>                 
                    </TouchableOpacity>
                    <TouchableOpacity onPress = {this.goNext}
                        style = {[styles.btn]}>                         
                            <Text>
                            下一张
                            </Text>
                    </TouchableOpacity>
                </View>

            </View>
            );
    }
})

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 (
        <TabBarIOS style = {styles.flex}
                   barTintColor = '#ffff22'>
            <TabBarIOS.Item title = "位置"
                            icon = {require('image!marker')}
                            onPress = {this.select.bind(this,'message')}
                            selected = {this.state.tab === 'message'}>
                            <ScrollView style = {StyleSheet.message}>
                                <Text style = {styles.message_title}>
                                    TabBarIOS Test
                                </Text>
                                <Text>
                                    这是一个测试TabBarIOS 的demo
                                </Text>
                            </ScrollView>
            </TabBarIOS.Item>
            <TabBarIOS.Item title = "联系人"
                            icon = {require('image!user')}
                            onPress = {this.select.bind(this,'phoneList')}
                            badge = "5"
                            selected = {this.state.tab === 'phoneList'}>
                            <ScrollView>
                                <Text style = {styles.list}>
                                    王小二
                                </Text>
                                <Text>
                                    18900000000
                                </Text>
                                <Text style = {styles.list}>
                                    王小三
                                </Text>
                                <Text>
                                    18900000001
                                </Text>
                                <Text style = {styles.list}>
                                    王小四
                                </Text>
                                <Text>
                                    18900000002
                                </Text>
                            </ScrollView>
            </TabBarIOS.Item>
            <TabBarIOS.Item 
                title = "动态"
                icon = {require('image!hearts')}
                onPress = {this.select.bind(this,'star')}
                selected = {this.state.tab === 'star'}>
                <ScrollView style = {styles.flex}>
                    <Image style = {{width : width,height: height}}
                        source = {{uri: 'http://ww4.sinaimg.cn/bmiddle/684e8299gw1f139744lfwj20c80c8abo.jpg'}}/>
                </ScrollView>
            </TabBarIOS.Item>
        </TabBarIOS>
    );
    }
});

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我们以后再学习，主要我也不会。。。