React-Native 之 TabBarIOS

前言

  • 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

  • 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

  • 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

TabBarIOS 组件简介

  • 目前的APP内，大部分都是选项与选项之间切换，比如：微信、微博、QQ空间…，在iOS中，我们可以通过TabItem类进行实现，那么，在React Native中，我们可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件不支持Android，当然后面我们会通过自定义该组件来满足实际开发需求
  • 当然，本章涉及到了 TabBarIOS组件 ，那么必不可少的，肯定需要与 TabBarIOS.Item 来搭配使用，废话不多说，先来看它们各自都拥有哪些属性

TabBarIOS 常见属性

  • 继承了View的所有属性

  • barTintColor：标签栏的背景颜色

  • tintColor：当前被选中的标签图标颜色

  • translucent：bool值，决定标签栏是否需要半透明化

TabBarIOS.Item 常见属性

  • 继承了View的所有属性

  • badge：图标右上角显示的红色角标

  • icon：给当前标签指定一个自定义图标(如果定义了 systemIcon属性 这个属性会被忽略)

  • onPress：点此标签被选中时调用，你应该修改过组件的状态使 selected={true}

  • selected：这个属性决定了子视图是否可见，如果你看到一个空白的页面，很可能是没有选中任何一个标签

  • selectedIcon：当标签被选中的时候显示的自定义图标（如果定义了systemIcon属性，这个属性会被忽略，如果定义了icon而没定义这个属性，在选中的时候图标会被染上蓝色）

  • systemIcom：一些预定义的系统图标（如果使用了此属性，标题和自定义图标都会被覆盖为系统定义的值）

    • 默认值：'bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated'

  • title：在图标下面显示的标题文字（如果定义了 systemIcon属性,这个属性会被忽略）

TabBarIOS 初体验

  • 先简单来看下怎么使用TabBarIOS

    • 首先我们需要引入TabBarIOS


    	import {
		TabBarIOS
	} from 'react-native';
    • 使用 TabBarIOS 很简单，但是需要配合 TabBarIOS.Item 使用,(需要注意的是我们必须给TabBarIOS设置尺寸，不然可能会造成实例化却无法看到的问题)


    	render() {
		return (
  			<View style={styles.container}>
    			<TabBarIOS
        			style={{height:49,  width}}
    			>
    			</TabBarIOS>
  			</View>
		);
	}

    效果：
    TabBarIOS实例化效果

    • 接着我们来给它添加 Item（TabBarIOS最多只能包含5个Item，超出的部分会用 more图标 代替）


    	render() {
		return (
  			<View style={styles.container}>
    			<TabBarIOS
        			style={{height:49,  width}}
    			>
        			<TabBarIOS.Item
            			systemIcon="bookmarks"  // 系统图标(bookmarks)
        			>
        			</TabBarIOS.Item>
        			<TabBarIOS.Item
            			systemIcon="contacts"  // 系统图标(contacts)
        			>
        			</TabBarIOS.Item>
        			<TabBarIOS.Item
            			systemIcon="downloads"  // 系统图标(downloads)
        			>
        			</TabBarIOS.Item>
        			<TabBarIOS.Item
            			systemIcon="favorites"  // 系统图标(favorites)
        			>
        			</TabBarIOS.Item>
        			<TabBarIOS.Item
            			systemIcon="history"  // 系统图标(history)
        			>
        			</TabBarIOS.Item>
    			</TabBarIOS>
  			</View>
		);
	}

    效果：
    TabBarIOS.Item效果

  • 是不是很简单，接下来我们试着修改一下 TabBarIOS 的属性，看看效果怎样样

    • 当前被选中标签颜色


    	<TabBarIOS
        style={{height:49,  width}}
        tintColor="green"	// 被选中标签颜色
    >
    </TabBarIOS>

    效果：
    被选中标签颜色

    • 背景色


    	<TabBarIOS
        style={{height:49,  width}}
        tintColor="green"
        barTintColor="black"	// TabBarIOS背景色
    >
    </TabBarIOS>

    效果：
    背景色效果

    • 是否有半透明效果


    	<TabBarIOS
        style={{height:49,  width}}
        tintColor="green"
        barTintColor="black"
        translucent={false}		// TabBarIOS不需要半透明效果
    >
    </TabBarIOS>

    效果：
    没有半透明效果

  • 这边再来试试 TabBarIOS.Item 的属性

    • 系统自带图标

      • bookmarks


      	<TabBarIOS.Item
        systemIcon="bookmarks"  // 系统图标(bookmarks)
    >
    </TabBarIOS.Item>

      效果：
      bookmarks

      • contacts


      	<TabBarIOS.Item
        systemIcon="contacts"  // 系统图标(contacts)
    >
    </TabBarIOS.Item>

      效果：
      contacts

      • downloads


      	<TabBarIOS.Item
        systemIcon="downloads"  // 系统图标(downloads)
    >
    </TabBarIOS.Item>

      效果：
      downloads

      • favorites


      	<TabBarIOS.Item
        systemIcon="favorites"  // 系统图标(favorites)
    >
    </TabBarIOS.Item>

      效果：
      favorites

      • featured


      	<TabBarIOS.Item
        systemIcon="featured"  // 系统图标(featured)
    >
    </TabBarIOS.Item>

      效果：
      featured

      • history


      	<TabBarIOS.Item
        systemIcon="history"  // 系统图标(history)
    >
    </TabBarIOS.Item>

      效果：
      history

      • more


      	<TabBarIOS.Item
        systemIcon="more"  // 系统图标(more)
    >
    </TabBarIOS.Item>

      效果：
      more

      • most-recent


      	<TabBarIOS.Item
        systemIcon="most-recent"  // 系统图标(most-recent)
    >
    </TabBarIOS.Item>

      效果：
      most-recent

      • most-viewed


      	<TabBarIOS.Item
        systemIcon="most-viewed"  // 系统图标(most-viewed)
    >
    </TabBarIOS.Item>

      效果：
      most-viewed

      • recents


      	<TabBarIOS.Item
        systemIcon="recents"  // 系统图标(recents)
    >
    </TabBarIOS.Item>

      效果：
      recents

      • search


      	<TabBarIOS.Item
        systemIcon="search"  // 系统图标(search)
    >
    </TabBarIOS.Item>

      效果：
      search

      • top-rated


      	<TabBarIOS.Item
        systemIcon="top-rated"  // 系统图标(top-rated)
    >
    </TabBarIOS.Item>

      效果：
      top-rated

    • 角标（角标的位置会受到TabBarIOS右边空间音效，当位置不够时，会自动往左移动，以保证显示完整性）


    	<TabBarIOS
        style={{height:49,  width}}
        tintColor="green"
        barTintColor="black"
        translucent={false}
    >
        <TabBarIOS.Item
            systemIcon="bookmarks"  // 系统图标(bookmarks)
            badge="99999999"
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
            systemIcon="contacts"  // 系统图标(contacts)
            badge="15"
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
            systemIcon="downloads"  // 系统图标(downloads)
            badge="@$!@"
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
            systemIcon="favorites"  // 系统图标(favorites)
            badge="aBBc"
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
            systemIcon="history"  // 系统图标(history)
            badge="99+"
        >
        </TabBarIOS.Item>
    </TabBarIOS>

    效果：
    角标效果

    • 自定义图标（目前只支持本地图片）


    	<TabBarIOS.Item
        renderAsOriginal={true}	// 如果为false，只会显示纯色图片
        icon={require('image!home')}
    >
    </TabBarIOS.Item>

    效果：
    自定义图标

    • 自定义高亮图标（目前只支持本地图片，如果没有设置，则会显示选中颜色图标）


    	selectedIcon={require('image!baker')}

    效果：
    高亮图片效果.gif

    • 文字（如果设置了系统图标，那么这个属性会被忽略）


    	title="首页"

    效果：
    文字效果

TabBarIOS.Item点击

  • 到这里肯定有人会说，为什么我的 TabBarIOS.Item 不能接收点击事件，无法切换界面，这边就来讲解怎么去实现页面的切换，它涉及到 TabBarIOS.Item 的两个属性 —— selected 和 onPress

    • 首先，要实现页面之间的切换，那么首先它们自己要有对应的页面，这边先来给各个 Item 设置属于自己的页面


    	render() {
      return (
        <View style={styles.container}>
            <TabBarIOS
                style={{height:49,  width}}
                tintColor="green"
                barTintColor="black"
                translucent={false}
            >
                <TabBarIOS.Item
                    systemIcon="bookmarks"  // 系统图标(bookmarks)
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>

                    </View>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="contacts"  // 系统图标(contacts)
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'blue'}]}>

                    </View>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="downloads"  // 系统图标(downloads）
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'red'}]}>

                    </View>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="favorites"  // 系统图标(favorites)
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'green'}]}>

                    </View>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="history"  // 系统图标(history)
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'gray'}]}>

                    </View>
                </TabBarIOS.Item>
            </TabBarIOS>
        </View>
    );
}

    • 页面之间的切换其实就是根据 selected 是否为 ture，以此决定是否重新渲染界面，涉及到重新渲染，所以肯定需要使用到 getInitialState（状态机） ，具体操作如下

      • 首先我们定义一个初始化变量来确定要显示的页面


      	getInitialState(){
		return{
    		selectedTabItem:0	// 预设变量，记录当前点击的item
		}
	},

      • 当我们点击相应标签的时候，系统就会调用 onPress 属性来进行反馈

        • 首先点击onPress的时候我们需要更新 状态机 中预设变量的值


        	onPress={() => {this.setState({selectedTabItem:0})}}
        • 接着我们要根据 预设变量 来判断跳转到哪个页面（当预设变量的值改变后，状态机会再次调用 render 函数进行渲染，也就会调用 TabBarIOS.Item 内的 selected 属性） 


        	selected={this.state.selectedTabItem == 0}
        • 视图部分完整代码


        	var TabBarIOSDemo = React.createClass({

		getInitialState(){
			return{
				selectedTabItem:0
			}
		},

		render() {
			return (
				<View style={styles.container}>
    				<TabBarIOS
        				style={{height:49,  width}}
        				tintColor="green"
        				barTintColor="black"
        				translucent={false}
    				>
        				<TabBarIOS.Item
            				systemIcon="bookmarks"  // 系统图标(bookmarks)
            				onPress={() => {this.setState({selectedTabItem:0})}}
            				selected={this.state.selectedTabItem == 0}
        				>
            				<View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>

            				</View>
        				</TabBarIOS.Item>
       					<TabBarIOS.Item
            				systemIcon="contacts"  // 系统图标(contacts)
            				onPress={() => {this.setState({selectedTabItem:1})}}
            				selected={this.state.selectedTabItem == 1}
        				>
            				<View style={[styles.childViewStyle, {backgroundColor:'blue'}]}>

            				</View>
        				</TabBarIOS.Item>
        				<TabBarIOS.Item
            				systemIcon="downloads"  // 系统图标(downloads)
            				onPress={() => {this.setState({selectedTabItem:2})}}
            				selected={this.state.selectedTabItem == 2}
        				>
            				<View style={[styles.childViewStyle, {backgroundColor:'red'}]}>

            				</View>
        				</TabBarIOS.Item>
        				<TabBarIOS.Item
            				systemIcon="favorites"  // 系统图标(favorites)
            				onPress={() => {this.setState({selectedTabItem:3})}}
            				selected={this.state.selectedTabItem == 3}
        				>
            				<View style={[styles.childViewStyle, {backgroundColor:'green'}]}>

            				</View>
        				</TabBarIOS.Item>
        				<TabBarIOS.Item
            				systemIcon="history"  // 系统图标(history)
            				onPress={() => {this.setState({selectedTabItem:4})}}
            				selected={this.state.selectedTabItem == 4}
        				>
            				<View style={[styles.childViewStyle, {backgroundColor:'gray'}]}>

            				</View>
        				</TabBarIOS.Item>
    				</TabBarIOS>
				</View>
			);
		}
	});

        效果：
        TabBarIOS页面切换效果.gif

  • 到这里，TabBarIOS页面切换就完成了，当然实际开发中我们会抽取代码，使代码看起来不会这么杂乱，这在后面会通过综合项目进行讲解

补充

  • 上面出现这样的代码，可能很多初学者不知道什么意思，这边就补充说明一下，在JS中是允许多个样式通过数组的形式传递的，它会根据数组内容自动去解析需要的值，并根据优先级去选择优先选择使用哪个属性

    补充

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/miaomiaoshen/p/6085266.html