native-cmos-coustomtab v0.0.3

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 标签中各配置参数介绍：

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

补充说明：

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 元素。

自定义组件

//可以在render方法中进行自定义组件
  var tabView = ()=> {<View style={{height: 49,alignItems:'center',justifyContent:'center'}}><Text>{this.state.myText}</Text></View>};

<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={Test}>自定义组件</Text>
</Tab>
// ....
//也可以将组件自定义成一个Component
class Test extends Component {
  constructor(props){
    super(props);
    this.state = {
      myText : "666"
    };
  }
  render(){
    return (
      <View style={{height: 49,alignItems:'center',justifyContent:'center'}}><Text>666</Text></View>
    )
  }
}

上述代码中，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。详见官方文档说明。

使用示例

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() {
  var TabView = ()=> {<View style={{height: 49,alignItems:'center',justifyContent:'center'}}><Text>{this.state.myText}</Text></View>};
    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={TabView}>自定义tab标签</Text>
    </Tab>
    
    <Toast ref="toast" position={'bottom'} />
    );
  }
}

class Test extends Component {
  constructor(props){
    super(props);
    this.state = {
      myText : "666"
    };
  }
  render(){
    return (
      <View style={{height: 49,alignItems:'center',justifyContent:'center'}}><Text>666</Text></View>
    )
  }
}

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);