說明
本文是根據(jù) navigation action 的官方最新文檔一步一步寫出來的配置，沒個配置都有加詳細的說明，如果說明不夠理解請將頁面滾動到最底部 加 qq 群一起討論
下面代碼注釋可以取消看效果
如果你覺得該文章對你有幫助加個喜歡，github 加個 start 謝謝
import React, { Component } from 'react'
import { Platform, StyleSheet, View, Text, Button, Image } from 'react-native'
import { TabNavigator } from 'react-navigation'
import Ionicons from 'react-native-vector-icons/Ionicons'
class MyHomeScreen extends Component {
render() {
return (
<Button
onPress={() => {
this.props.navigation.navigate('Notifications')
}}
title="Go to notifications"
/>
)
}
}
class MyNotificationsScreen extends Component {
render() {
return (
<Button
onPress={() => {
this.props.navigation.goBack()
}}
title="Go back home"
/>
)
}
}
class Me extends Component {
render() {
return <Text>Meeee</Text>
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26
}
})
export default TabNavigator(
{
Home: {
screen: MyHomeScreen,
navigationOptions: {
/**
* tab 導(dǎo)航 icon
*/
tabBarIcon: ({ tintColor, focused }) =>
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{ color: tintColor }}
/>
}
},
Notifications: {
screen: MyNotificationsScreen,
navigationOptions: {
/**
* icon
*/
tabBarIcon: ({ tintColor, focused }) =>
<Ionicons
name={focused ? 'ios-alarm' : 'ios-alarm-outline'}
size={26}
style={{ color: tintColor }}
/>,
/**
* 底部 tab 的 label 值 可以是一個 react 元素
*/
tabBarLabel: 'fdsaf',
/**
* 底部 tab 是否顯示
*/
tabBarVisible: true,
/**
* 當(dāng)前 tab 的 label 如果 headerTitle 或者 tabBarLabel 沒有指定則使用該屬性
*/
title: 'Notifications',
/**
* 是否啟用滑動
*/
swipeEnabled: false,
/**
* 點擊是觸發(fā)該方法
*
* @param {Function} 去哪一個頁面
* @param {Object} scene
*/
tabBarOnPress({ jumpToIndex, scene }) {
jumpToIndex(scene.index)
}
}
},
Me: {
screen: Me,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) =>
<Ionicons
name={focused ? 'ios-person' : 'ios-person-outline'}
size={26}
style={{ color: tintColor }}
/>
}
}
},
{
/**
* tab 顯示的位置
* top：頂部
* bottom： 底部
* 默認情況 安卓頂部顯示，IOS底部顯示
*/
tabBarPosition: 'bottom',
/**
* 是否允許在手勢滑動 true or false 建議不設(shè)置
*/
swipeEnabled: false,
/**
* 路由切換時是否開啟過渡動畫效果 不設(shè)置
*/
animationEnabled: false,
/**
* 默認顯示的屏幕
*/
initialRouteName: 'Me',
/**
* 定義 tab 選項卡顯示的順序或個數(shù)
*/
// order: ['Home', 'Notifications'],
/**
* 待定
*/
// backBehavior: true,
/**
* tabBar 的配置
*/
tabBarOptions: {
/**
* 是否顯示 label 文字 true or false
*
* @default true
*/
showLabel: true,
/**
* 是否顯示 Icon
* ios 默認為true
* android 默認為false
*/
showIcon: true,
/**
* label 文字是否大寫
* android 默認 true
* ios 默認 false
*/
upperCaseLabel: false,
/**
* 點擊波紋樣式
* android >= only
*/
// pressColor: '#000',
/**
* 按下的不透明度
* ios and android < 5.0 only
*/
pressOpacity: 0.2,
/**
* tab 是否開啟滾動 待測試
*/
// scrollEnabled: true,
// tabStyle: {
// backgroundColor: '#f0f0f0'
// },
/**
* 指示器的樣式設(shè)置 only andriod
*/
indicatorStyle: {
backgroundColor: '#fff',
flex: 1,
height: 50
},
/**
* 底部導(dǎo)航 文字 部分樣式
*/
labelStyle: {
// color: '#000000',
fontSize: 11,
marginTop: Platform.OS === 'ios' ? 14 : 0
},
/**
* 底部導(dǎo)航 icon 部分樣式
*/
// iconStyle: {
// color: '#ff0000'
// },
/**
* 底部 tab 容器樣式
*/
style: {
backgroundColor: '#fff',
height: 50,
borderTopColor: '#f1f1f1',
shadowColor: '#aaa',
shadowOffset: {
width: 0,
height: 4
},
shadowOpacity: 0.6,
shadowRadius: 10
},
/**
* 選中時的 tab label 和 icon 的顏色
*/
activeTintColor: '#ff0000',
/**
* 選中時的 tab 的背景色 ios 專屬
*/
activeBackgroundColor: '#ffffff',
/**
* 未選中時的 tab label 和 icon 的顏色
*/
inactiveTintColor: '#000',
/**
* 未選中時的 tab 的背景色 ios 專屬
*/
inactiveBackgroundColor: '#fff'
}
}
)
如果你對文章感興趣 或者有其他技術(shù)問題探討
qq群：218618405
github 地址：https://github.com/Sawyer-china/
本實例 地址： https://github.com/Sawyer-china/react-navigation-demo
