react native之TabbarIOS

在目前市面上的APP中，大部分都是选项与选项之间的切换，比如：微信、微博、QQ空间......,在iOS中，我们可以通过TabItem类进行实现。那么，在React Native中，我们应该怎么实现呢？

在React Native中可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件是不支持Android的，当然后面我们可以自定义该组件。

<TabBarIOS.Item
       title="首页"
       icon={{uri:"home",scale:1.5}}  //指定的路径,scale可以放大缩小
>
</TabBarIOS.Item>

一、TabBarIOS常见的属性

View的所有属性都可以被继承

barTintColor color 设置tab条的背景颜色

tintColor color 设置tab条上被选中图标的颜色

translucent bool 设置Tab栏是不是半透明的效果

二、TabBarIOS.Item常见的属性

badge number
在图标的右上方显示小红色气泡，显示信息

icon Image.propTypes.source
Tab按钮自定义的图标，如果systemicon属性被定义了，那么该属性会被忽略

onPress function
当Tab按钮被选中的时候进行回调，你可以设置selected={true}来设置组件被选中

selected bool
该属性标志子页面是否可见，如果是一个空白的内容页面，那么一定是忘记了选中任何的一个页面标签Tab

selectedIcon Image.propTypes.source
设置当Tab按钮被选中的时候显示的自定义图标，如果systemIcon属性被设置了，那么该属性会被忽略。如果定义了icon属性，但是当前的selectedIcon属性没有设置，那么该图标会被设置成蓝色

style 设置样式风格，继承View的样式各种风格

systemIcon
enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')
系统预定义的图标，如果你使用这些图标，那么你上面设置的标题，选中的图标都会被这些系统图标所覆盖。

title string
在Tab按钮图标下面显示的标题信息，如果你设置了SystemIcon属性，那么该属性会被忽略

/**
 * Sample React Native App
 * https://github.com/facebook/react-native 

 * @flow
 */

/*TabBarIOS*/

import React,{ Component } from 'react';
import {
    AppRegistry,StyleSheet,Text,View,Image,TabBarIOS
} from 'react-native';

var TabbarIOS=React.createClass({
    //设置初始值
    getInitialState(){
        return{
            //默认被选中的TabbarItem
            selecdTabBarItem:"home"
        }
    },render(){
        return(
            <View style={styles.container}>
                {/*头部*/}
                <View style={styles.headerView}>
                    <Text>Tabbar头部</Text>
                </View>
                {/*选项卡*/}
                <TabBarIOS
                    barTintColor="black"
                >
                    {/*第一块*/}
                    <TabBarIOS.Item
                        systemIcon="contacts"
                        badge="3"
                        selected={this.state.selecdTabBarItem=="home"?true:false}
                        onPress={()=>{
                            this.setState({selecdTabBarItem:"home"})}
                        }
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor:"red"}]}>
                            <Text>首页</Text>
                        </View>
                    </TabBarIOS.Item>


                    {/*第二块*/}
                    <TabBarIOS.Item
                        systemIcon="bookmarks"
                        selected={this.state.selecdTabBarItem=="bookmarks"?true:false}
                        onPress={()=>{
                            this.setState({selecdTabBarItem:"bookmarks"})}
                        }
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor:"green"}]}>
                            <Text>第二页</Text>
                        </View>
                    </TabBarIOS.Item>


                    {/*第三块*/}
                    <TabBarIOS.Item
                        systemIcon="downloads"
                        selected={this.state.selecdTabBarItem=="downloads"?true:false}
                        onPress={()=>{
                            this.setState({selecdTabBarItem:"downloads"})}
                        }
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor:"blue"}]}>
                            <Text>第三页</Text>
                        </View>
                    </TabBarIOS.Item>


                    {/*第四块*/}
                    <TabBarIOS.Item
                        systemIcon="search"
                        selected={this.state.selecdTabBarItem=="search"?true:false}
                        onPress={()=>{
                            this.setState({selecdTabBarItem:"search"})}
                        }
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor:"purple"}]}>
                            <Text>第四页</Text>
                        </View>
                    </TabBarIOS.Item>
                </TabBarIOS>
            </View>
        )
    }
});




const styles = StyleSheet.create({
    container:{
        flex:1
    },headerView:{
        alignItems:"center",justifyContent:"center",height:64,backgroundColor:"yellow"
    },commonViewStyle:{
        flex:1,alignItems:"center",}
});

//导出类
export default TabbarIOS;

作者：旋之华 链接：http://www.jianshu.com/p/7a746d1603a7 來源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!