示例圖.gif
前言：他方山上有佳石瞻讽，可以用來琢玉器。只有解決了一個紅屏，才有機會遇見另一個紅屏都伪。只有解決了一個困難磅轻，才有機會遇到其他的困難聋溜。O(∩_∩)O~生命不息，奮斗不止斋否。
React Native中有許多第三方用于封裝tabBar的庫老客，當然也有官方提供的苇瓣。React-native-scrollable-tab-view是一款非常實用的第三方庫贪薪。放于界面之上可以實現(xiàn)一個界面中子界面的切換效果，置于界面之下可實現(xiàn)功能模塊間的切換拧烦，通常用于封裝自定義的tabBar。
安裝
在終端輸入命令 npm i react-native-scrollable-tab-view --save
這條命令中--save的目的是讓它寫入到package.json文件中去炼吴。如若在安裝的過程中提示沒有權(quán)限安裝等信息童芹，請在這條命令的后面加上 --force強制安裝假褪。確認安裝
打開package.json文件，如若看到下圖所示的效果，則說明安裝正確瑟由。
203DE339-1541-4DB7-A6B6-EF6FF7D8F47B.png
屬性
- renderTabBar:用于渲染TabBar歹苦。添加該屬性狠角，需要在引入組件之時加上它的子組件丰歌。系統(tǒng)提供兩種方式晓勇，DefaultTabBar和ScrollableTabBar。DefaultTabBar表示Tab.item會平分水平方向上的空間，而ScrollableTabBar表示所有的tabBar.item的長度將會超過屏幕寬度，但是當滾動屏幕之時可以顯示出來拇泣。當然我們也可以自定義它的模式噪叙。
//引入
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';
//在render函數(shù)中
render() {
return (
<ScrollableTabView
//渲染成ScrollableTabBar模式
// renderTabBar={() => <ScrollableTabBar/>}
//渲染成自定義的模式
renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}
>
<ScrollableTabView/>
- tabBarPosition:表示TabBar的位置。一共有四個取值：top(放在界面上方)霉翔、bottom(放在界面底部)睁蕾、overlayTop(有懸浮效果在上方)、overlayBottom(有懸浮效果在下方)
tabBarPosition='bottom'
8E4B4AF5-3293-4CD4-B5E0-95C544E3859C.png
- onChangeTab:切換界面的時候會調(diào)用該方法债朵，該屬性中包含一個參數(shù)子眶，它是一個object對象，這個對象有兩個參數(shù)序芦，i表示被選中的下標壹店，ref表示被選中的對象。
onChangeTab = {(obj)=>{console.log('被選中的下標:'+obj.i);}}
- onScroll:視圖滑動時調(diào)用芝加，該屬性會傳遞一個Float類型的數(shù)字，范圍是[0,tab的數(shù)量-1]
onScroll={
(position) => {
console.log('滑動時的位置：' + position);
}
}
- locked:手指是否能拖動射窒，默認為false（可拖動）,如為true則表示只能通過點擊tab來切換視圖藏杖。
locked={false}
- initialPage:初始化時被選中的下標，默認為0
initialPage={0}
- page:設(shè)置選中指定的tab
- children:表示所有子視圖的數(shù)組
- tabBarUnderlineColor:設(shè)置Tab選中時下方橫線的顏色脉顿。注意蝌麸，該屬性只是在系統(tǒng)提供的DefaultTabBar和ScrollableTabBarTab狀態(tài)下才有效果。
renderTabBar={() => <ScrollableTabBar/>}
tabBarUnderlineColor={'red'}
- tabBarBackgroundColor:整個tabBar的背景顏色艾疟。
- tabBarActiveTextColor/tabBarInactiveTextColor: 選中/未選中的tabBar的文字顏色
- tabBarTextStyle:提供一個object對象的參數(shù)来吩，用于設(shè)置文字的樣式，如字體字號
- style：這是所有view都擁有的屬性
- scrollWithoutAnimation:切換tab時蔽莱，是否有動畫默認是false弟疆，即沒有。
- prerenderingsiblingsNumber:默認為0,表示預(yù)渲染視圖的個數(shù)盗冷，為0表示只渲染當前頁怠苔。
實例
效果圖.gif
1、構(gòu)建項目
為了使iOS端和android端能更和諧的使用一套代碼仪糖。先創(chuàng)建一個入口文件取名為APP.js柑司。此時，index.iOS.js和index.android.js文件就只需要引入APP.js文件即可锅劝。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
//iOS端和安卓端公用一套代碼
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import App from './APP'
export default class babyShow extends Component {
render() {
return (
<App/>
);
}
}
AppRegistry.registerComponent('babyShow', () => babyShow);
2攒驰、封裝自定義的TabBar。取名為MyTabBar.js
封裝時要注意故爵，有三個屬性是系統(tǒng)傳入的玻粪。即goToPage、activeTab、tabs奶段。所以要先在規(guī)定屬性類型時先寫上這三個屬性饥瓷。其他的屬性則可以自己選擇。
在使用tabbar的時候痹籍，通常會用到圖片呢铆。這里可以使用第三方的圖庫。
安裝方法如下：
npm install react-native-vector-icons --save
安裝好了之后記得一定要輸入下面的命令
rnpm link
重新編譯即可使用
import Icon from 'react-native-vector-icons/Ionicons'; //這個是圖標
以下是整個MyTabBar文件的全部代碼蹲缠。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'; //這個是圖標
export default class MyTabBar extends Component {
static propTypes = {
goToPage: React.PropTypes.func, // 跳轉(zhuǎn)到對應(yīng)tab的方法
activeTab: React.PropTypes.number, // 當前被選中的tab下標
tabs: React.PropTypes.array, // 所有tabs集合
tabNames: React.PropTypes.array, // 保存Tab名稱
tabIconNames: React.PropTypes.array, // 保存Tab圖標
}; // 注意這里有分號
render() {
return (
<View style={styles.tabs}>
{/*遍歷棺克。系統(tǒng)會提供一個tab和下標 調(diào)用一個自定義的方法*/}
{this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
</View>
);
}
componentDidMount() {
// Animated.Value監(jiān)聽范圍 [0, tab數(shù)量-1]
this.props.scrollValue.addListener(this.setAnimationValue);
}
setAnimationValue({value}) {
console.log('動畫值：'+value);
}
/// 處理tabbar的顏色和字體及圖標
renderTabOption(tab, i) {
let color = this.props.activeTab == i ? "#FF3399" : "#ADADAD"; // 判斷i是否是當前選中的tab，設(shè)置不同的顏色
return (
//因為要有點擊效果 所以要引入可觸摸組件
<TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab} key={tab}>
<View style={styles.tabItem}>
<Icon
name={this.props.tabIconNames[i]} // 圖標 調(diào)用傳入的屬性
size={30}
color={color}/>
<Text style={{color: color}}>
{this.props.tabNames[i]}
</Text>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
tabs: {
flexDirection: 'row',
height: 50,
},
tab: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
tabItem: {
flexDirection: 'column',
alignItems: 'center',
},
});
3线定、調(diào)用自定義的tabbar文件
在APP.js文件中娜谊，把屬性tabNames和tabIconNames屬性定義在狀態(tài)機上，然后傳入到屬性中斤讥。
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import IconFont from 'react-native-vector-icons/FontAwesome';
import MyTabBar from './Common/MyTabBar';
export default class APP extends Component {
constructor(props) {
super(props);
this.state = {
tabNames: ['主頁', '分類', '她他群','我的'],
tabIconNames: ['ios-home', 'ios-grid', 'logo-buffer', 'ios-contact'],
};
}
render() {
let tabNames = this.state.tabNames;
let tabIconNames = this.state.tabIconNames;
return (
<ScrollableTabView
//renderTabBar={() => <DefaultTabBar/>}
renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}
tabBarPosition={'bottom'}
onChangeTab={
(obj) => {
console.log('被選中的tab下標：' + obj.i);
}
}
onScroll={
(position) => {
console.log('滑動時的位置：' + position);
}
}
locked={false}
initialPage={0}
prerenderingSiblingsNumber={1}
>
{/*每個頁面 設(shè)定四個頁面*/}
<View tabLabel="page1" style={styles.center}>
<Text >每一天都不同</Text>
<IconFont.Button name="facebook" backgroundColor="#FF3399" size={20} >
妲己會一直愛主人
</IconFont.Button>
<Icon name="md-alarm" size={50}></Icon>
<IconFont.Button name="twitter" backgroundColor="#FF3399" size={20} >
因為被設(shè)定成這樣
</IconFont.Button>
</View>
<View tabLabel="page2" style={styles.center}>
<Text style={{color:'pink'}}>小喬要努力變強</Text>
</View>
<View tabLabel="page3" style={styles.center}>
<Text style={{color:'red'}}>蘿莉身御姐心</Text>
</View>
<View tabLabel="page4" style={styles.center}>
<Text style={{color:'#70f3ff'}}>別靠近我,阿福不想帶來不幸</Text>
</View>
</ScrollableTabView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
center: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
