native-cmos-tab

react-native 中自定义tab栏，支持样式自定义及滑动屏幕切换tab等操作。

安装

npm install --save-dev native-cmos-tab

引入

import Tab,{ScrollableTabBar,DefaultTabBar} from 'native-cmos-tab';

使用

注意：使用之前，为确保滑动标签栏或屏幕时动画能正常进行，需先到工程目录下的node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js 文件中的第90行，将 useNativeDriver: true 更改为 useNativeDriver: false

引入完成之后，在组件的渲染方法中直接引入标签，并传入相应配置即可：

render() {
    return (
      <Tab
        style={{marginTop: 20}}
        initialPage={1}
        tabBarUnderlineStyle={{backgroundColor:'#00FF00',height:2}}
        tabBarBackgroundColor='#00FFFF'
        tabBarActiveTextColor='#9B30FF'
        tabBarInactiveTextColor='#7A67EE'
        tabBarTextStyle={{fontSize: 15}}
        renderTabBar={() => <DefaultTabBar style={{height:40}}/>}
        // renderTabBar={() => <ScrollableTabBar tabStyle={{height:40}}/>}
        onChangeTab = {(currentPage) => {
          console.log(currentPage.i);
          // this.setState...
        }}
        locked={false}
        disSelectablePages={[1,2]}
      >
        <Text tabLabel='Tab00'/>
        <Text tabLabel='Tab01'/>
        <Text tabLabel='Tab02'/>
    </Tab>
    );
  }

Tab 标签中各配置参数介绍：

注：以下参数均为可选参数，都有各自的默认值

参数 | 类型 | 说明 :---:|:---:|:---: style | object | 自定义标签栏样式，默认为空：{} initialPage |object| 初始显示的标签索引，默认为0 tabBarUnderlineStyle | object | 定义标签栏中下划线的样式（主要是颜色，默认为深蓝色#000080） tabBarBackgroundColor | string | 定义标签栏的背景色，默认为白色#ffffff tabBarActiveTextColor | string | 定义选中标签的文字颜色，默认为深蓝色#000080 tabBarInactiveTextColor | string | 定义未选中标签的文字颜色，默认为黑色#000000 tabBarTextStyle | object | 自定义标签栏中字体样式，默认大小为15px renderTabBar | function | 自定义标签栏显示的样式，默认为DefaultTabBar,可定义为可滚动的ScrollableTabBar onChangeTab | function | 切换标签栏时触发的方法，具体使用见补充说明 locked | boolean | 是否关闭左右滑动切换标签功能，默认为false，即不关闭滑动，可以进行滑动切换 disSelectablePages | array | 设置无法点击的tab页的索引值（以0开头），数组形式，支持多个tab设置

补充说明：

1. 当renderTabBar为DefaultTabBar时，标签栏中各tab底部的横条宽度是平分整个屏幕宽度的；当renderTabBar为ScrollableTabBar时，标签栏中tab底部的横条宽度根据标签显示的tablabel内容宽度来定，并且在标签栏宽度不大于屏幕宽度时，不会平分屏幕宽度。请在使用时根据需求进行选择。
2. 如何自定义标签栏高度——renderTabBar为DefaultTabBar时，通过标签中的style属性设置height；为ScrollableTabBar时，通过标签中的tabStyle属性设置height（如上述示例代码）。
3. 如果在子标签中使用RN默认的导航栏（navigator），则需显示地将this.props.navigator传入子标签中再在子标签中进行获取，使用其pop、push等方法。
4. 如果在子标签中需要使用toast组件，请将toast组件写到tab标签外（即与tab标签同级），并附ref值。然后在子标签中调用toast的显示/隐藏方法（具体见示例）。
5. onChangeTab参数定义时需传入一个方法，该方法参数不是必须的，如果带参数，则参数为当前选中的标签页对象。该参数对象默认有一个i属性，为当前标签页的索引值（0，1，2，...）。可在该方法中对state值进行相应修改。
6. disSelectablePages设置无法点击的tab页索引值时，locked值会强制设置为true；如果索引值超过tab标签的总个数，无影响。

Tab 标签内各项配置完之后，就需要添加子标签了，每个子标签都可以是自定义的组件，也可以是简单的react-native 元素。

无论是自定义组件还是元素，都需要在标签内传入tabLabel参数。该参数接收一个字符串或自定义的Text组件（显示富文本时使用），为该tab标签显示的文字。如果不配tabLabel参数，则默认为空格。示例代码如下：

<Tab>
    <Text tabLabel='Tab1'>native</Text>
    <WelcomePage tabLabel="welcome"></WelcomePage>
    <View style={{backgroundColor:'#ECF4C0',width:200,height:200}} tabLabel='Tab3'>
      <Text>我是view里的text</Text>
    </View>
    <Text />   // 没有配置tabLabel参数
    <Text tabLabel='Tab5'/>
    <Text tabLabel='Tab6'/>
    <Text tabLabel='Tab7'/>
    <Text tabLabel='Tab8'/>
    <Text tabLabel='Tab9'/>
    <Text tabLabel={RichText}>该标签的标题是富文本</Text>
</Tab>
// ....
// 自定义组件，用于设置富文本tabLabel
class RichText extends Component {
  render(){
    return(
      <Text>未读(
        <Text style={{color:'blue'}}>66</Text>
      )
      </Text>
    );
  }
}

上述代码中，WelcomePage是自定义的组件，通过import导入的；View和Text标签是通过import {...} from 'react-native'导入的基础组件。

补充说明：

1. 如果子标签是ScrollView，且ScrollView中包含有TextInput组件，那么最好在ScrollView标签中设置keyboardShouldPersistTaps属性为‘handled’，以防出现TextInput组件无法失去焦点的问题。
2. 若将自定义组件传给tabLabel，该标签在被选中时，该标签中除了特殊标记的文字颜色（如示例中的66为蓝色），其他文字颜色会照常变成设置的tabBarInactiveTextColor的颜色。

注意：keyboardShouldPersistTaps属性的设置需要较高版本的react-native。老版本中，该属性只能设置为true或false。详见官方文档说明。

自定义Tab标签View

export default class TabTest extends Component {
  render() {
    return (
      <Tab>
        <Text customLabel={TabView} tabLabel="customLabel">自定义tab</Text>
    </Tab>
    );
  }
}

const TabView = (<View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'blue'}}><Text>自定义</Text></View>);

使用示例

testJson.json如下

{
  "beans":[
    {
      "name":"张三",
      "age":20
    },
    {
      "name":"李四",
      "age":18
    }
  ]
}

index.ios.js如下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import WelcomePage from '../customJS/WelcomePage.js';
import Tab,{ScrollableTabBar,DefaultTabBar} from 'native-cmos-tab';
import Toast, { DURATION } from 'react-native-easy-toast'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import jsonData from '../data/testJson.json';

export default class cmosTabTest extends Component {
  
  render() {
    return (
      <Tab
        // style={{marginTop: 50}}
        // initialPage={1}
        // tabBarUnderlineStyle={{backgroundColor:'#00FF00'}}
        // tabBarBackgroundColor='#FFFFFF'
        // tabBarActiveTextColor='#9B30FF'
        // tabBarInactiveTextColor='#7A67EE'
        // tabBarTextStyle={{fontSize: 18}}
        renderTabBar={() => <ScrollableTabBar tabStyle={{height:40}}/>}
        onChangeTab = {(currentPage) => {
          console.log(currentPage.i);
          // this.setState...
        }}
        >

        <Text tabLabel='Tab1'>native</Text>
        <WelcomePage tabLabel="welcome"></WelcomePage>
        <View style={{backgroundColor:'#ECF4C0',width:200,height:200}} tabLabel='Tab3'>
          <Text>我是view里的text</Text>
        </View>
        <Text tabLabel='Tab4'>{typeof(jsonData)}</Text>
        <Text tabLabel='Tab5'>{JSON.stringify(jsonData)}</Text>
        <Text tabLabel='Tab6'>{jsonData.beans[0].name}</Text>
        <Text tabLabel='Tab7'>{JSON.stringify(jsonData.beans)}</Text>
        <Text tabLabel='Tab8'/>
        <TouchableHighlight
        	tabLabel='Tab9'
            style={{padding: 10}}
            onPress={()=>{
                this.refs.toast.show('hello world!',DURATION.LENGTH_LONG);
            }}>
            <Text>Press me, show toast</Text>
        </TouchableHighlight>
        <Text tabLabel={RichText}>标题是富文本</Text>
    </Tab>
    
    <Toast ref="toast" position={'bottom'} />
    );
  }
}

class RichText extends Component {
  render(){
    return(
      <Text>未读(
        <Text style={{color:'blue'}}>66</Text>
      )
      </Text>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

# 更新

版本号|时间|说明
:----|:---:|:----
v0.0.17|2017-12-26|新增自定义Tab标签栏View配置