TabBar切换页的实现——React-native-tab-navigator的使用

在构建TabBar的方式上,使用React-native-tab-navigator(https://github.com/exponentjs/react-native-tab-navigator

干货直接上代码

一:项目集成React-native-tab-navigator

     在当前项目下 终端运行:npm install react-native-tab-navigator –save下载

 

显示 @xx.xx.x 版本号且 在 项目的根目录的 \node_modules下面出现这个文件react-native-tab-navigator   后就说明下载集成成功

二:引入react-native-tab-navigator

    import TabNavigator from 'react-native-tab-navigator';

  

import React, { Component } from 'react';
import TabNavigator from 'react-native-tab-navigator';
import {
  AppRegistry,
  Text,
  View,
  Navigator,
  StyleSheet,
  Image,
  TouchableHighlight  
} from 'react-native';

import HomeComponent from          './HomeComponent';
import CustomerComponent from      './CustomerComponent';
import OrderComponent  from    './OrderComponent';
import ProductComponent from    './ProductComponent';
import MineComponent  from  './MineComponent';

export default class Main extends Component 
{

 constructor(props) {
 super(props);
 this.state = {
      selectedTab:'home'
    };
 }

render() {
        return (
            <View style={styles.container} >
                <TabNavigator tabBarStyle={styles.tab}>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('./img/ic_home_normal.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_home_checked.png')} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomeComponent/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '订单'}
                        title="订单"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('./img/ic_order_normal.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_order_checked.png')} />}
                        onPress={() => this.setState({ selectedTab: '订单' })}>
                        <OrderComponent />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '客户'}
                        title="客户"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('./img/ic_customer_normal.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_customer_checked.png')} />}
                        onPress={() => this.setState({ selectedTab: '客户' })}>
                        <CustomerComponent />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '产品'}
                        title="产品"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('./img/ic_product_normal.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_product_checked.png')} />}
                        onPress={() => this.setState({ selectedTab: '产品' })}>
                        <ProductComponent />
                    </TabNavigator.Item>
                   <TabNavigator.Item
                        selected={this.state.selectedTab === '我的'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('./img/ic_mine_normal.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_mine_checked.png')} />}
                        onPress={() => this.setState({ selectedTab: '我的' })}>
                        <MineComponent />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }


}


const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tab: {  
        height: 70,  
        backgroundColor: '#222222',  
        alignItems: 'center'  
    },
    tabText: {
        marginTop: 1,
        color: '#ffffff',
        fontSize: 16
    },
    selectedTabText: {
        marginTop: 1,
        color: '#FFD700',
        fontSize: 16
    },
    icon: {
        width: 30,
        height: 31,
        resizeMode: 'stretch',  
        marginTop: 10  
    }
});

2.TabNavigator的样式设置

上面的代码当中,TabNavigator继承于View类,除了包括style的一些属性可以和View控件一样设置外,它还具有其他一些独特的属性,用于控制样式

sceneStyle:场景样式,即Tab页容器的样式,可按View的style设置

tabBarStyle:TabBar的样式,基本也可按照普通的style写法进行设置

tabBarShadowStyle:TabBar阴影的样式,不过对于扁平化的设计,这个属性应该用处不大

hidesTabTouch:bool类型,即是否隐藏Tab按钮的按下效果

根据我们上面对TabBar样式的分析,我们可以按照如下样式,为TabNavigator指定tabBarStyle

根据主题设置背景颜色为黑色

const styles = StyleSheet.create({
    tab: {  
        height: 70,  
        backgroundColor: '#222222',  
        alignItems: 'center'  
    }
}

3.Item的构建

TabNavigator的Item就是我们所看到的5个Tab按钮以及它们所对应的页面,这些页面在Android中可能以Fragment呈现,在iOS中可能以UIView呈现,而在React Native中,则是一个<View>,我们可以自己义,也可以直接放置其他控件。

这些Item在TabNavigator中,以<TabNavigator.Item>形式呈现,其可设置的相关属性如下:

renderIcon: 必填项,即图标,但为function类型,所以这里需要用到Arrow Function
renderSelectedIcon: 选中状态的图标,非必填,也是function类型
badgeText: 即Tab右上角的提示文字,可为String或Number,类似QQ中Tab右上角的消息提示,非必填
renderBadge: 提示角标渲染方式,function类型,类似render的使用,非必填
title: 标题,String类型,非必填
titleStyle: 标题样式,style类型,非必填
selectedTitleStyle: 选中标题样式,style类型,非必填
selected: bool型,是否选中状态,可使用setState进行控制,默认false
onPress: function型,即点击事件的回调函数,这里需要控制的是state,而切换页面已经由控件本身帮我们实现好了
allowFontScaling: bool型,是否允许字体缩放,默认false

而对于我们所关心的页面切换,在TabNavigator.Item中,可将其置于<TabNavigator.Item>{<View/>}</TabNavigator.Item>之中,即作为Item的子元素存在,这里请注意:如果添加了一个Item,必须为其添加一个View,否则将无法运行!

这里提醒大家:

如果使用本地图片,即在<Image>中,source属性内使用require的形式引用图片,由于js本身的性质,不可以使用动态的require,而应该直接require后的图片资源当做参数传递!而使用uri形式获取在线资源不受影响

在上面的代码中,由于TabBar控件的问题,我们可以在tabIcon样式中,控制Icon的上边距,以达到居中的效果,代码如下:

    icon: {
        width: 30,
        height: 31,
        resizeMode: 'stretch',  
        marginTop: 10  
    }

这里说明:

1.特别注意:由于在onPress函数中调用了this.setState,所以必须在类的使用构造函数,并对state进行初始化:

 constructor(props) {
 super(props);
 this.state = {
      selectedTab:'home'
    };
 }


效果图:






评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值