React Native 底部导航栏

首先安装：npm install react-native-tab-navigator

　　　　  然后再引入文件中

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

举例如下：

　　　　

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

export default class App extends Component<Props> {
  /*初始化state*/
  constructor(props){
      super();
      this.state={
        selectedTab:'tb_msg',
      }
  }
    /**
     * 公共组件方法
     * @param selectedTab 选中的tab
     * @param title
     * @param icon
     * @param selectedIcon
     * @param imageStyle  选中时渲染图标的颜色
     * @param mark  角标
     * @param viewContent  页面内容
     * @returns {*}
     */
  tabNavigatorItems(selectedTab,title,icon,selectedIcon,imageStyle,mark,viewContent){
      return (
          <TabNavigator.Item
              selected={this.state.selectedTab === selectedTab }
              title={title}
              renderIcon={()=> <Image style={styles.myImage} source={icon}/> }
              renderSelectedIcon={()=> <Image style={[styles.myImage,{tintColor:imageStyle}]} source={selectedIcon}/> }
              badgeText={mark}
              onPress={()=> this.setState({selectedTab:selectedTab}) }>
              <View style={{flex:1}}><Text>{viewContent}</Text></View>
          </TabNavigator.Item>
      )
  }

  render() {
    return (
      <View style={styles.container}>
         <TabNavigator>
            {this.tabNavigatorItems('tb_msg',"消息",require('./images/msg.png'),require("./images/selected_msg.png"),'#ffe09a',"1","消息页面内容")}
            {this.tabNavigatorItems('tb_contacts',"联系人",require('./images/contacts.png'),require("./images/selected_contacts.png"),'#65bb74',"","联系人页面内容")}
            {this.tabNavigatorItems('tb_watch',"看点",require('./images/wacth.png'),require("./images/selected_watch.png"),'#6ebef3',"","看点页面内容")}
            {this.tabNavigatorItems('tb_dynamic',"动态",require('./images/dynamic.png'),require("./images/selected_dynamic.png"),'#622193',"","动态页面内容")}
         </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    myImage:{
        width:22,
        height:22,
    }

});

下面是组件的属性和描述

TabNavigator props：

prop default type description
sceneStyle    inherited    object (style)    场景样式，即Tab页容器的样式，可按View的style设置
tabBarStyle    inherited    object (style)    TabBar的样式，基本也可按照普通的style写法进行设置
tabBarShadowStyle    inherited    object (style)    TabBar阴影的样式，不过对于扁平化的设计，这个属性应该用处不大
hidesTabTouch    false    boolean    bool类型，即是否隐藏Tab按钮的按下效果
TabNavigator.Item props：

prop    default    type    description
renderIcon    none    function    即图标，但为function类型，所以这里需要用到Arrow Function
renderSelectedIcon    none    function    选中状态的图标，非必填，也是function类型
badgeText    none    string or number    即Tab右上角的提示文字，可为String或Number，类似QQ中Tab右上角的消息提示，非必填
renderBadge    none    function    提示角标渲染方式，function类型，类似render的使用，非必填
title    none    string    标题，String类型，非必填
titleStyle    inherited    style    标题样式，style类型，非必填
selectedTitleStyle    none    style    选中标题样式，style类型，非必填
tabStyle    inherited    style    styling for tab
selected    none    boolean    bool型，是否选中状态，可使用setState进行控制，默认false
onPress    none    function    即点击事件的回调函数，这里需要控制的是state
allowFontScaling    false    boolean    bool型，是否允许字体缩放，默认false