React Native 控件之 TabBarIOS 和 TabBarIOS.Item 组件详解及实例React Nat

(一)前言

今天我们继续来看一下TabBarIOS以及TabBarIOS.Item底部Tab切换组件详解以及实例。

刚创建的React Native技术交流2群(496601483),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

该两个TabBarIOS和TabBarIOS.Item组件可以实现页面Tab切换的功能，Tab页面切换的架构在应用开发中还是非常常见的。例如:QQ,微信,美团等等。今天我们就主要来看一下该两个组件内容以及组合使用实例。

[注].该组件是已IOS结尾的，也就是说该两个组件只能在iOS平台进行使用，如果要实现Android平台的，大家可以去github上面查看一下相关Tab页组件。

(二)TabBarIOS.Item

2.1.属性

1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

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

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

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

5.selected bool 该属性标志子页面是否可见，如果你看到一个空白的内容页面，那么你很有可能忘记了选中任何的一个页面标签Tab

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

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

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

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

(三)TabBarIOS

3.1.属性

1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2.barTintColor color 设置tab条的背景颜色

3.style 继承View的所有风格样式

4.tintColor 当前被选中图标的颜色

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

(四)使用实例

上面我们主要对TabBarIOS以及TabBarIOS.Item组件做了相关讲解介绍，下面我们针对该两个组件看一下具体使用实例，以下代码经官方实例修改而来，具体代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TabBarIOS,
} from 'react-native';

class TabBarIOSDemo extends Component {
  constructor(props){
    super(props);
    this.state={
         selectedTab: '历史',
       notifCount: 0,
       presses: 0,
    };
  }
  //进行渲染页面内容
  _renderContent(color: string, pageText: string, num?: number) {
    return (
      
        {pageText}
        第 {num} 次重复渲染{pageText}
      
    );
  }
  render() {
    return (
      
        
          TabBarIOS使用实例
        
        
         {
            this.setState({
              selectedTab: '自定义',
            });
          }}
          >
          {this._renderContent('#414A8C', '自定义界面')}
        
         0 ? this.state.notifCount : undefined}
          onPress={() => {
            this.setState({
              selectedTab: '历史',
              notifCount: this.state.notifCount + 1,
            });
          }}
          >
          {this._renderContent('#783E33', '历史记录', this.state.notifCount)}
        
         {
            this.setState({
              selectedTab: '下载',
              presses: this.state.presses + 1
            });
          }}>
           {this._renderContent('#21551C', '下载页面', this.state.presses)}
        

      
      
    );
  }
}
const styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 20,
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
});

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

运行效果如下:

查看图片

(五)最后总结

今天我们主要讲解学习了TabBarIOS以及TabBarIOS.Item底部Tab切换组件基本相关介绍和使用详解，大家有问题可以加一下群React Native技术交流2群(496601483).或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（www.lcode.org/）侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

查看图片

关注我的微博，可以获得更多精彩内容