标签栏在开发中常常会使用到，通常在 App 中都是通过 Tab 切换实现主体功能的切换。React Native 为我们提供了一个相关组件：TabBarIOS。下面通过样例演示如何使用。

1，TabBarIOS组件介绍

2，效果图

3，样例代码

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

//默认应用的容器组件
class App extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {tab: 'message'};
    }

    //Tab标签点击
    select(tabName) {
        this.setState({tab: tabName});
    }

    //渲染
    render() {
        return (
            <TabBarIOS style={styles.flex}>
                <TabBarIOS.Item title="支付宝" icon={require("./image/zhifubao.png")}
                onPress={this.select.bind(this, 'message')}
                selected={this.state.tab === 'message'}>
                    <ScrollView>
                        <View style={styles.message}>
                            <Text style={styles.message_title}>支付宝</Text>
                            <Text>
                                支付宝（中国）网络技术有限公司是国内领先的第三方支付平台，
                                致力于提供“简单、安全、快速”的支付解决方案。
                            </Text>
                        </View>
                    </ScrollView>
                </TabBarIOS.Item>

                <TabBarIOS.Item title="大众点评" icon={require("./image/dzdp.png")}
                onPress={this.select.bind(this, 'phonelist')}
                selected={this.state.tab === 'phonelist'}>
                    <ScrollView>
                        <View style={styles.message}>
                            <Text style={styles.message_title}>大众点评</Text>
                            <Text>
                                大众点评是中国领先的本地生活信息及交易平台，也是全球最早建
                                立的独立第三方消费点评网站。
                            </Text>
                        </View>
                    </ScrollView>
                </TabBarIOS.Item>

                <TabBarIOS.Item title="携程" icon={require("./image/xc.png")}
                 onPress={this.select.bind(this, 'star')}
                 selected={this.state.tab === 'star'}>
                    <ScrollView>
                        <View style={styles.message}>
                            <Text style={styles.message_title}>携程</Text>
                            <Text>
                                携程旅行网拥有国内外六十余万家会员酒店可供预订，是中国领先
                                的酒店预订服务中心。
                            </Text>
                        </View>
                    </ScrollView>
                </TabBarIOS.Item>
            </TabBarIOS>
        );
    }
}

//样式定义
const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    message: {
        alignItems: 'center',
        marginLeft: 5,
        marginRight: 5
    },
    message_title: {
        fontSize: 18,
        color: '#18B5FF',
        marginBottom: 5
    }
});

AppRegistry.registerComponent('HelloWorld', () => App);