React Native项目 - 设置TabBarNavigat

作者: 黄晓坚 | 来源:发表于2017-09-29 00:56 被阅读24次

导入外部组件
- 在终端中cd到项目的根目录 通过命令行npm install react-native-tab-navigator --save安装'react-native-tab-navigator' ，npm install react-native-deprecated-custom-components安装react-native-deprecated-custom-components

// ------导入外部组件------------
import TabNavigtor from 'react-native-tab-navigator';
import  {Navigator} from 'react-native-deprecated-custom-components';

按照正常写TabBarItems则有太多的重复步骤，则把他们抽取封装成一个可以调用的函数renderTabBarNavigatorItems

            {/*    // 抽取封装  renderTabBarNavigatorItems
                   <TabNavigtor.Item
                       title='首页'
                       //默认图标
                       renderIcon={() => <Image source={{uri:'icon_tabbar_homepage'}} style={styles.iconStyle} />}
                       // 被选中图标
                       renderSelectedIcon={()=> <Image source={{uri:'icon_tabbar_homepage_selected'}} style={styles.iconStyle}/>}
                       // 默认被选中状态
                       selected={this.state.selectedTab === 'Home'}
                       // 被点击切换
                       onPress={() => {this.setState({selectedTab:'Home'})}}
                       // 被选中时 字体颜色
                       selectedTitleStyle= {styles.titlesStyles}

                   >
                    <Navigator

                        initialRoute={{
                            name: '首页',
                            component:Home
                        }}

                        configureScene={() => {

                            return Navigator.SceneConfigs.PushFromRight;
                        }}

                        renderScene={(route, navigator) =>{
                            let Component = route.component;
                            return <Component {...route.passProps} navigator={navigator} />
                        }}

                    />

                   </TabNavigtor.Item>

                   /!*商家*!/
               <TabNavigtor.Item
                   title='商家'
                   renderIcon = {() => <Image source={{uri:'icon_tabbar_merchant_normal'}} style={styles.iconStyle}/>}
                   renderSelectedIcon = {() => <Image source={{uri:'icon_tabbar_merchant_selected'}} style={styles.iconStyle}/>}
                   selected={this.state.selectedTab === 'Shop'}
                   onPress={() => {this.setState({selectedTab:'Shop'})}}
                   selectedTitleStyle= {styles.titlesStyles}
               >
                   <Shop/>

               </TabNavigtor.Item>

                   /!*我的*!/
               <TabNavigtor.Item
                   title='我的'
                   renderIcon = {() => <Image source={{uri:'icon_tabbar_mine'}} style={styles.iconStyle}/>}
                   renderSelectedIcon = {() => <Image source={{uri:'icon_tabbar_mine_selected'}} style={styles.iconStyle}/>}
                   selected={this.state.selectedTab === 'Me'}
                   onPress={() => {this.setState({selectedTab:'Me'})}}
                   selectedTitleStyle= {styles.titlesStyles}
               >
                   <Me/>

               </TabNavigtor.Item>

                   /!*更多*!/
               <TabNavigtor.Item
                   title='更多'
                   renderIcon = {() => <Image source={{uri:'icon_tabbar_misc'}} style={styles.iconStyle}/>}
                   renderSelectedIcon = {() => <Image source={{uri:'icon_tabbar_misc_selected'}}  style={styles.iconStyle}/>}
                   selected={this.state.selectedTab === 'More'}
                   onPress={() => {this.setState({selectedTab:'More'})}}
                   selectedTitleStyle= {styles.titlesStyles}


               >

                   <More/>

               </TabNavigtor.Item>
*/}
           </TabNavigtor>
        );
    }

在封装的函数renderTabBarNavigatorItems传入需要的参数title,IconName,SelectedIconName,selectedTab,componentName,component,badgeText依据项目需求来定义所需要的函数。

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,  //判断当前的运行系统
} from 'react-native';

// ------导入外部组件------------
import TabNavigtor from 'react-native-tab-navigator';
import  {Navigator} from 'react-native-deprecated-custom-components';

var Home = require('../HJHome/HJHome');
var Me = require('../HJMe/HJMe');
var More = require('../HJMore/HJMore');
var Shop = require('../HJShop/HJShop');

export default class HJMain extends Component {

    // 构造
    constructor(props) {
      super(props);
      this.state = {

          selectedTab:'Home'
      };

    }

    render() {
        return (

           <TabNavigtor>

                   {/*首页 商店 我的 更多 TabBarItems*/}
               {this.renderTabBarNavigatorItems('首页','icon_tabbar_homepage','icon_tabbar_homepage_selected','Home','首页',Home)}
               {this.renderTabBarNavigatorItems('商店','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','Shop','商店',Shop,1)}
               {this.renderTabBarNavigatorItems('我的','icon_tabbar_mine','icon_tabbar_mine_selected','Me','我的',Me,)}
               {this.renderTabBarNavigatorItems('更多','icon_tabbar_misc','icon_tabbar_misc_selected','More','更多',More,5)}

   
    //封装TabBarItems和Navigator   
    renderTabBarNavigatorItems(title,IconName, SelectedIconName,selectedTab,componentName,component,badgeText){

        return(
           <TabNavigtor.Item
               // TabBar名称
               title= {title}
               // 默认图标
               renderIcon = {() => <Image source={{uri:IconName}} style={styles.iconStyle}/>}
               // 被选中图标
               renderSelectedIcon = {() => <Image source={{uri:SelectedIconName}}  style={styles.iconStyle}/>}
               // 默认状态
               selected={this.state.selectedTab === selectedTab}
               // 点击被选中状态
               onPress={() => {this.setState({selectedTab:selectedTab})}}
               // 被选中字体颜色
               selectedTitleStyle= {styles.titlesStyles}
               // 角标
               badgeText = {badgeText}

            >
               {/*导航条跳转*/}
               <Navigator

                   initialRoute={{
                       name: componentName,  //名称
                       component:component   //跳转的界面
                   }}

                   configureScene={() => {

                       return Navigator.SceneConfigs.PushFromRight; //跳转方式
                   }}

                   renderScene={(route, navigator) =>{
                       let Component = route.component;
                       return <Component {...route.passProps} navigator={navigator} />
                   }}

               />

        </TabNavigtor.Item>

    )

    }
}

const styles = StyleSheet.create({

    iconStyle :{
        width: Platform.OS === 'ios' ? 30 :25, //如果当前系统是ios 是系统则width:30 是安卓则width:25
        height: Platform.OS === 'ios' ? 30 :25,
    },
    titlesStyles :{
        color:'rgba(212,97,0,1)',
    },
});

module.exports = HJMain;

运行效果：

Items.gif

自定义角标效果：
- 通过 renderBadge ={} 这个函数进行角标自定义效果
- 效果图：

badge.gif

 // 角标
               //badgeText = {badgeText}
               renderBadge={()=>isbadge ? <View style={styles.badgeView}><Text style={styles.badgeText}>{badgeText}</Text></View> : null}
               >

示例代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,  //判断当前的运行系统
} from 'react-native';

// ------导入外部组件------------
import TabNavigtor from 'react-native-tab-navigator';
import  {Navigator} from 'react-native-deprecated-custom-components';

var Home = require('../HJHome/HJHome');
var Me = require('../HJMe/HJMe');
var More = require('../HJMore/HJMore');
var Shop = require('../HJShop/HJShop');

export default class HJMain extends Component {

    // 构造
    constructor(props) {
      super(props);
      this.state = {

          selectedTab:'Home'
      };

    }

    render() {
        return (

           <TabNavigtor>

                   {/*首页 商店 我的 更多 TabBarItems*/}
               {this.renderTabBarNavigatorItems('首页','icon_tabbar_homepage','icon_tabbar_homepage_selected','Home','首页',Home,false)}
               {this.renderTabBarNavigatorItems('商店','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','Shop','商店',Shop,true,1)}
               {this.renderTabBarNavigatorItems('我的','icon_tabbar_mine','icon_tabbar_mine_selected','Me','我的',Me,false)}
               {this.renderTabBarNavigatorItems('更多','icon_tabbar_misc','icon_tabbar_misc_selected','More','更多',More,true,5)}


  
    }
    //封装TabBarItems和Navigator
    renderTabBarNavigatorItems(title,IconName, SelectedIconName,selectedTab,componentName,component,isbadge,badgeText){

        return(
           <TabNavigtor.Item
               // TabBar名称
               title= {title}
               // 默认图标
               renderIcon = {() => <Image source={{uri:IconName}} style={styles.iconStyle}/>}
               // 被选中图标
               renderSelectedIcon = {() => <Image source={{uri:SelectedIconName}}  style={styles.iconStyle}/>}
               // 默认状态
               selected={this.state.selectedTab === selectedTab}
               // 点击被选中状态
               onPress={() => {this.setState({selectedTab:selectedTab})}}
               // 被选中字体颜色
               selectedTitleStyle= {styles.titlesStyles}
               // 角标
               //badgeText = {badgeText}
               renderBadge={()=>isbadge ? <View style={styles.badgeView}><Text style={styles.badgeText}>{badgeText}</Text></View> : null}
               >

               {/*导航条跳转*/}
               <Navigator

                   initialRoute={{
                       name: componentName,  //名称
                       component:component   //跳转的界面
                   }}

                   configureScene={() => {

                       return Navigator.SceneConfigs.PushFromRight; //跳转方式
                   }}

                   renderScene={(route, navigator) =>{
                       let Component = route.component;
                       return <Component {...route.passProps} navigator={navigator} />
                   }}

               />

        </TabNavigtor.Item>

    )

    }
}

const styles = StyleSheet.create({

    iconStyle :{
        width: Platform.OS === 'ios' ? 30 :25, //如果当前系统是ios 是系统则width:30 是安卓则width:25
        height: Platform.OS === 'ios' ? 30 :25,
    },
    titlesStyles :{
        color:'rgba(212,97,0,1)',
    },
    // 自定义角标样式
    badgeView:{
        width:14,
        height:14 ,
        backgroundColor:'#f85959',
        borderWidth:1,
        marginLeft:10,
        marginTop:3,
        borderColor:'#FFF',
        alignItems:'center',
        justifyContent:'center',
        borderRadius:7,
    },
    badgeText:{
        color:'#fff',
        fontSize:8,
    }
});

module.exports = HJMain;

Demo下载
- 运行项目
  - a）打开终端，输入：cd 项目根目录 进到项目目录
  - b）输入：npm install，下载node_modules
  - c）运行在iOS设备：react-native run-ios
  - d）运行在Android设备：react-native run-android

React Native项目 - 设置TabBarNavigat

导入外部组件

运行效果：

Demo下载

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读