0.0.3 • Published 4 years ago
native-cmos-tab 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 标签中各配置参数介绍:
注:以下参数均为可选参数,都有各自的默认值
参数 | 类型 | 说明 |
---|---|---|
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设置 |
补充说明:
- 当renderTabBar为DefaultTabBar时,标签栏中各tab底部的横条宽度是平分整个屏幕宽度的;当renderTabBar为ScrollableTabBar时,标签栏中tab底部的横条宽度根据标签显示的tablabel内容宽度来定,并且在标签栏宽度不大于屏幕宽度时,不会平分屏幕宽度。请在使用时根据需求进行选择。
- 如何自定义标签栏高度——renderTabBar为DefaultTabBar时,通过标签中的style属性设置height;为ScrollableTabBar时,通过标签中的tabStyle属性设置height(如上述示例代码)。
- 如果在子标签中使用RN默认的导航栏(navigator),则需显示地将this.props.navigator传入子标签中再在子标签中进行获取,使用其pop、push等方法。
- 如果在子标签中需要使用toast组件,请将toast组件写到tab标签外(即与tab标签同级),并附ref值。然后在子标签中调用toast的显示/隐藏方法(具体见示例)。
- onChangeTab参数定义时需传入一个方法,该方法参数不是必须的,如果带参数,则参数为当前选中的标签页对象。该参数对象默认有一个i属性,为当前标签页的索引值(0,1,2,...)。可在该方法中对state值进行相应修改。
- 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'导入的基础组件。
补充说明:
- 如果子标签是ScrollView,且ScrollView中包含有TextInput组件,那么最好在ScrollView标签中设置keyboardShouldPersistTaps属性为‘handled’,以防出现TextInput组件无法失去焦点的问题。
- 若将自定义组件传给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配置