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。

barTintColor  String  标签栏的背景颜色 style   {}  可以自定义一些样式 tintColor  String 当前被选中标签的颜色 unselectedItemTintColor  String 没有被选中的标签的颜色 IOS10以上才有效 translucent Boolean  标签栏是否需要半透明化

三、TabBarIOS. Item 的API

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

 

badge            String|Number     标签右上角的气泡（形如微信里未读消息样式） icon               Image.propTypes.source     给当前标签指定一个自定义的图标。如果定义了 systemIcon 属性， 这个属性会被忽略。 onPress         Function     触屏点击是触发的事件，此时一般修改组件的状态来使得 selected={true} 。 selected        Boolean    属性决定子试图是否可见（空白页面很可能是没有任何标签被选中或者没有引入子组件） selectedIcon    Image.propTypes.source   被选中时显示的自定义图标 style     {}       自定义的属性 title      string    在图标下面显示的标题文字。如果定义了 systemIcon 属性，这个属性会被忽略。 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);

 

查看更多关于React Native之TabBarIOS组件的详细内容...