React Native常用第三方框架之导航react-navi

2017-12-14 本文已影响0人代码森林中的一只猫

(二).TabNavigator

基础用法/属性介绍


const Tab = TabNavigator(
{
Home: {
screen: Documents,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Documents',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_homepage@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_homepage_selected@2x.png')}
/>)}),}
})

屏幕导航配置

screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。
navigationOptions：配置TabNavigator的一些属性
title：标题，会同时设置导航条和标签栏的title，还是不推荐这种方式。
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)
tabBarIcon：设置标签栏的图标。需要给每个都设置。
tabBarLabel：设置标签栏的title。推荐这个方式。
标签栏配置
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）
swipeEnabled：是否允许在标签之间进行滑动。
animationEnabled：是否在更改标签时显示动画。
lazy：是否根据需要懒惰呈现标签，而不是提前制作，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐改成true哦。
initialRouteName：设置默认的页面组件
backBehavior：按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions：配置标签栏的一些属性
iOS属性
activeTintColor：label和icon的前景色活跃状态下（选中）。
activeBackgroundColor：label和icon的背景色活跃状态下（选中）。
inactiveTintColor：label和icon的前景色不活跃状态下(未选中)。
inactiveBackgroundColor：label和icon的背景色不活跃状态下（未选中）。
showLabel：是否显示label，默认开启。
style：tabbar的样式。
labelStyle：label的样式。
安卓属性
activeTintColor：label和icon的前景色活跃状态下（选中）。
inactiveTintColor：label和icon的前景色不活跃状态下(未选中)。
showIcon：是否显示图标，默认关闭。
showLabel：是否显示label，默认开启。
style：tabbar的样式。
labelStyle：label的样式。
upperCaseLabel：是否使标签大写，默认为true。
pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）。
pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）。
scrollEnabled：是否启用可滚动选项卡。
tabStyle：tab的样式。
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题。
labelStyle：label的样式。
iconStyle：图标的样式。
ps：很多人问我,为什么安卓上的tabbar文字会下移, 是因为安卓比iOS多了一个属性,就是iconStyle,通过设置labelStyle和iconStyle两个样式,外加style的高度,来使效果更佳合理.
跳转


// 注册tabs

const Tabs = TabNavigator({

HomeTab: {

screen: MainScreen,

navigationOptions: { // 也可以写在组件的static navigationOptions内

tabBarLabel:'首页',//tab一的名称

tabBarIcon:({tintColor}) =>

(<Text style={[styles.bottomBarIcon,{fontFamily:'iconfont'},{color:tintColor}]}></Text>)// 这是名称上面要渲染的组件

}

},

BillTab: {

screen: MainScreen1,

navigationOptions: {

tabBarLabel:'账单',

tabBarIcon:({tintColor}) =>

(<Text style={[styles.bottomBarIcon,{fontFamily:'iconfont'},{color:tintColor}]}></Text>)

}

}

}, {

animationEnabled: true, // 切换页面时是否有动画效果

tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的

swipeEnabled: true, // 是否可以左右滑动切换tab

backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转

tabBarOptions: {

activeTintColor: '#ff8500', // 文字和图片选中颜色

inactiveTintColor: '#999', // 文字和图片未选中颜色

showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示

indicatorStyle: {

height: 4 // 如TabBar下面显示有一条线，可以设高度为0后隐藏

},

style: {//这个样式是对整个tabNavigator生效的。

backgroundColor: '#fff', // TabBar 背景色

height: 60

},

labelStyle: {

fontSize: 10, // 文字大小

},

},

});

综合demo常用的底栏结构


const Tab = TabNavigator(
{
Home: {
screen: Documents,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Documents',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_homepage@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_homepage_selected@2x.png')}
/>
)
}),
},
Nearby: {
screen: Notifications,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Notifications',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_merchant@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_merchant_selected@2x.png')}
/>
)
}),
},

Order: {
screen: Submission,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Submission',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_order@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_order_selected@2x.png')}
/>
)
}),
},

Mine: {
screen: Setting,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Setting',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_mine@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_mine_selected@2x.png')}
/>
)
}),
},
},
{
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
tabBarOptions: {
activeTintColor: color.theme,
inactiveTintColor: '#979797',
style: { backgroundColor: '#ffffff' },
},
}

);
const Navigator = StackNavigator(
{
Tab: { screen: Tab },
Web: { screen: WebScene }
},
{
navigationOptions: {
// headerStyle: { backgroundColor: color.theme }
headerBackTitle: null,
headerTintColor: '#333333',
showIcon: true,
},
}
);

实质就是StackNavigator里嵌入TabNavigator
也可以采用ShiTu里TabNavigator嵌套StackNavigator方法（更类似与ios中每一个模块一个导航的思想，并不是只有这种情况可以实现model，上面的情况实现model也是没问题的，具体实现可以参考上一篇文章）

const ShiTuStack = StackNavigator({
ShiTu:{
screen:ShiTu,
navigationOptions: ()=> TabOptions('识兔',ShiTuIcon,ShiTuIcon,'识兔'),
},
Login:{
screen:Login,
navigationOptions:{
headerTitle:'Login',
}
}
},{
mode:'modal',
});

// 为了实现登录的modal效果,所以将Gank页面单独拆分出来.
const GankStack = StackNavigator({
Gank:{
screen:Gank,
navigationOptions: ()=> TabOptions('干货',GankIcon,GankIcon,'干货集中营'),
},
Login:{
screen:Login,
navigationOptions:{
headerTitle:'Login',
}
}
},{
mode:'modal',
});
//// 为了实现登录的modal效果,所以将Main页面单独拆分出来.
const MainStack = StackNavigator({
Main:{
screen:Main,
navigationOptions: ()=> TabOptions('个人中心',MainIcon,MainIcon,'个人中心'),
},
Login:{
screen:Login,
navigationOptions: ({navigation}) => LoginOptions({navigation})
}
},{
mode:'modal',
});


const MyTab = TabNavigator({
ShiTuStack: {
screen: ShiTuStack,
navigationOptions:{
header:null
}
},
GankStack: {
screen:GankStack,
navigationOptions:{
header:null
}
},
MainStack:{
screen:MainStack,
navigationOptions:{
header:null
}
},
}
}）

React Native常用第三方框架之导航react-navi

(二).TabNavigator

猜你喜欢

热点阅读