React Native之TabBarIOS组件

---恢复内容开始---

一、简介

顾名思义tab切换的效果，很常见的组件功能，在微信微博底部导航功能。

二、TabBarIOS与TabBarIOS.Item

见字知意，显然TabBarIOS是包含有TabBarIOS.Item子组件的。官网代码示之：

render: function() {
    return (
      <TabBarIOS
        unselectedTintColor="yellow"
        tintColor="white"
        barTintColor="darkslateblue">
        <TabBarIOS.Item
          title="Blue Tab"
          icon={{uri: base64Icon, scale: 3}}
          selected={this.state.selectedTab === 'blueTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'blueTab',
            });
          }}>
          {this._renderContent('#414A8C', 'Blue Tab')}
        </TabBarIOS.Item>
        <TabBarIOS.Item
          systemIcon="history"
          badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
          selected={this.state.selectedTab === 'redTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'redTab',
              notifCount: this.state.notifCount + 1,
            });
          }}>
          {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
        </TabBarIOS.Item>
        <TabBarIOS.Item
          icon={require('./flux.png')}
          selectedIcon={require('./relay.png')}
          renderAsOriginal
          title="More"
          selected={this.state.selectedTab === 'greenTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'greenTab',
              presses: this.state.presses + 1
            });
          }}>
          {this._renderContent('#21551C', 'Green Tab', this.state.presses)}
        </TabBarIOS.Item>
      </TabBarIOS>
    );

三、TabBarIOS的API

我们要对组件进行修改先要看有哪些可能用到的API。

1. barTintColor  String  标签栏的背景颜色

2. style  {}  可以自定义一些样式

3. tintColor String 当前被选中标签的颜色

4. unselectedItemTintColor  String 没有被选中的标签的颜色 IOS10以上才有效

5. translucent Boolean  标签栏是否需要半透明化

三、TabBarIOS.Item的API

我们从上面的api可以得知TabBarIOS的属性设置是对标签栏整体的控制。我们如果想单独为标签设置则需要在Item里设置。

 

1. badge           String|Number     标签右上角的气泡（形如微信里未读消息样式）

2. icon              Image.propTypes.source     给当前标签指定一个自定义的图标。如果定义了systemIcon属性， 这个属性会被忽略。

3. onPress        Function     触屏点击是触发的事件，此时一般修改组件的状态来使得selected={true}。

4. selected        Boolean    属性决定子试图是否可见（空白页面很可能是没有任何标签被选中或者没有引入子组件）

5. selectedIcon   Image.propTypes.source   被选中时显示的自定义图标

6. style     {}       自定义的属性

7. title     string    在图标下面显示的标题文字。如果定义了systemIcon属性，这个属性会被忽略。

8. systemIcon     enum   预定义的系统图标（如果你使用了此属性，title和selectedIcon都会被覆盖为系统定义的值。）

 

 

四、结合上面的API自己动手写个  

 

 

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

const Icon = require('react-native-vector-icons/Ionicons')

import List from './src/List/index';
import Publish from './src/Publish/index';
import Setting from './src/Setting/index';

export default class AwesomeProject extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Creation'
        }
    }

    render() {
        return (
            <TabBarIOS
                barTintColor="#222222"
                tintColor="#ffcd32"
                style={styles.container}
            >
                <Icon.TabBarItem
                    title="主页"
                    iconName="ios-home-outline"
                    selectedIconName="ios-home"
                    selected = {this.state.selectedTab === 'CreateList'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'CreateList'
                        })
                    }}
                >
                    <List/>
                </Icon.TabBarItem>
                <Icon.TabBarItem
                    title="发布"
                    iconName="ios-add-circle-outline"
                    selectedIconName="ios-add-circle"
                    selected = {this.state.selectedTab === 'Creation'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'Creation'
                        });
                    }}
                >
                    <Publish />
                </Icon.TabBarItem>
                <Icon.TabBarItem
                    title="个人中心"
                    iconName="ios-person-outline"
                    selectedIconName="ios-person"
                    badge="2"
                    selected = {this.state.selectedTab === 'Setting'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'Setting'
                        })
                    }}
                >
                    <Setting/>
                </Icon.TabBarItem>
            </TabBarIOS>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        backgroundColor: '#222222'
    }
});

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