React Native - TabBarIOS

文档地址
可参考

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

一、TabBarIOS常见的属性

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

• barTintColor color 设置tab条的背景颜色

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

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

二、TabBarIOS.Item常见的属性

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

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

  • 常见的systemicon图标

 systemIcon="bookmarks"  // 系统图标(bookmarks)
 systemIcon="most-recent"  // 系统图标(most-recent)
 systemIcon="contacts"  // 系统图标(contacts)
 systemIcon="downloads"  // 系统图标(downloads)
 systemIcon="favorites"  // 系统图标(favorites)
 systemIcon="featured"  // 系统图标(featured)
 systemIcon="history"  // 系统图标(history)
 systemIcon="more"  // 系统图标(more)
 systemIcon="most-viewed"  // 系统图标(most-viewed)
 systemIcon="search"  // 系统图标(search)
 systemIcon="top-rated"  // 系统图标(top-rated)

• 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属性，那么该属性会被忽略
• 运行效果：

TabBars.gif

• 实例代码：

// 引入组件
var Home = require('../Common/HJHome');
var Find = require('../Common/HJFind');
var Me = require('../Common/HJMe');
var Message = require('../Common/HJMessage');
var Homes = require('../Common/HJHomes');

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

export default class HJMain extends Component {

    // 构造初始化状态
    constructor(props) {
      super(props);

      this.state = {

          selectedItem:'Home'
      };

    }
    render() {
        return (
            
                {/*首页*/}
                {this.setState({selectedItem:'Home'})}}
                >
                


                

                {/*信息*/}
                {this.setState({selectedItem:'Message'})}}
                >
                    


                

                 {/*发现*/}
                {this.setState({selectedItem:'Discover'})}}
                >
                    


                

                {/*我的*/}
                this.setState({selectedItem:'Me'})}
                >
                    


                

            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

module.exports = HJMain;