ReactNative基礎(六)使用react-navigation實現頁面導航佈局效果(TabNavigator)
阿新 • • 發佈:2019-02-16
此部落格基於react-native-0.49.3
上一篇介紹了一下react-navigation
依賴庫中的StackNavigator 這篇文章就接著上一篇繼續往下說也就是依賴庫中的第二個導航欄TabNavigator相當於Android中的TabLayout
TabNavigator:
效果圖:
使用的第一步當然是下載react-navigation
這個依賴庫了
- 既然使用的是第三方庫,如果在你專案的
node_modules
資料夾中沒有react-navigation
那麼你需要執行如下命令
//進入你專案的根目錄下執行
npm install -- save react-navigation
由於react-native-0.49.3
這個版本直接將index.android.js
和index.ios.js
這兩個入口檔案直接合併為了一個index.js
檔案並建立一了一個App.js
檔案,那我們現在就只需要來修改我們這個檔案就可以達到我們的效果了。
直接配置導航欄
import React, {Component} from 'react';
import {
Image,
} from 'react-native';
//引入react-navigation依賴庫
import {
TabNavigator,
} from 'react-navigation' ;
//展示的頁面
import Home from './src/Home';
import Type from './src/Type';
import ShopCar from './src/ShopCar';
import Mine from './src/Mine';
//Tab
export default Tab = TabNavigator({
//每一個頁面的配置
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: '首頁',
tabBarIcon: ({tintColor}) => (
<Image
source={require ('./images/ic_home.png')}
style={[{height: 24, width: 24}, {tintColor: tintColor}]}
/>
),
},
},
Type: {
screen: Type,
navigationOptions: {
tabBarLabel: '分類',
tabBarIcon: ({tintColor}) => (
<Image
source={require('./images/ic_type.png')}
style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
),
}
},
ShopCar: {
screen: ShopCar,
navigationOptions: {
tabBarLabel: '購物車',
tabBarIcon: ({tintColor}) => (
<Image
source={require('./images/ic_shop_car.png')}
style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
),
}
},
Mine: {
screen: Mine,
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({tintColor}) => (
<Image
source={require('./images/ic_me.png')}
style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
),
}
},
}, {
//設定TabNavigator的位置
tabBarPosition: 'bottom',
//是否在更改標籤時顯示動畫
animationEnabled: true,
//是否允許在標籤之間進行滑動
swipeEnabled: true,
//按 back 鍵是否跳轉到第一個Tab(首頁), none 為不跳轉
backBehavior: "none",
//設定Tab標籤的屬性
tabBarOptions: {
//Android屬性
upperCaseLabel: false,//是否使標籤大寫,預設為true
//共有屬性
showIcon: true,//是否顯示圖示,預設關閉
showLabel: true,//是否顯示label,預設開啟
activeTintColor: '#EB3695',//label和icon的前景色 活躍狀態下(選中)
inactiveTintColor: 'gray',//label和icon的前景色 活躍狀態下(未選中)
style: { //TabNavigator 的背景顏色
backgroundColor: 'white',
height: 55,
},
indicatorStyle: {//標籤指示器的樣式物件(選項卡底部的行)。安卓底部會多出一條線,可以將height設定為0來暫時解決這個問題
height: 0,
},
labelStyle: {//文字的樣式
fontSize: 13,
marginTop: -5,
marginBottom: 5,
},
iconStyle: {//圖示的樣式
marginBottom: 5,
}
},
});
- 解釋一下上面的程式碼
//每一個頁面的配置
Home: {
screen: Home,//當前選項卡載入的頁面
//配置每一個選項卡的樣式
navigationOptions: {
tabBarLabel: '首頁',//顯示的標籤文字
//顯示的圖片
tabBarIcon: ({tintColor}) => (
<Image
source={require('./images/ic_home.png')}
style={[{height: 24, width: 24}, {tintColor: tintColor}]}
/>
),
},
},
- 後半部分則是配置整個TabNavigator的樣式了;重要的東西都在上面標好了註釋認真閱讀哦!
- 更多的屬性介紹詳見文章頂部給出的官網地址
接下來就是編寫那四個頁面的佈局了,都是一樣的改幾個字就好了。
Home.js
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} activeOpacity={0.5}>
<Text style={{color: 'white'}}>首頁</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
width: 120,
height: 45,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#4398ff',
}
});
這篇文章到這就over了,TabNavigator使用起來還是很簡單的。接下來就可以寫一個將
StackNavigator
、TabNavigator
結合起來使用的Demo了。
將StackNavigator和TabNavigator結合使用案例下載地址