More than code
Welcome to the website

React Navigation 指南 6:Tab navigation

文章基于 react-navigationv2.0.1
移动应用中最常见的导航风格是基于标签的导航。可以在屏幕底部或者顶部生成Tab导航。
v1.x中不同的是,由TabNavigator变更为createBottomTabNavigatorcreateMaterialTopTabNavigator

1. createBottomTabNavigator

底部tab导航,如图:

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

示例

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

export default createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

RouteConfigs

路由配置对象

BottomTabNavigatorConfig

initialRouteName:初始路由名称。
order:定义选项卡顺序的routeNames数组。
paths:提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。
backBehavior:点击后退按钮是否将标签切换到初始选项卡。如果是,则设置为initialRoute,否则none。默认为initialRoute行为。
tabBarComponent:可选,覆盖标签栏的组件。
tabBarOptions:具有以下属性的对象:
activeTintColor:活动选项卡的标签和图标颜色。
activeBackgroundColor:活动选项卡的背景颜色。
inactiveTintColor:非活动选项卡的标签和图标颜色。
inactiveBackgroundColor:非活动选项卡的背景颜色。
showLabel:是否显示文字,默认为true。
style:标签栏的样式对象。
labelStyle:标签标签的样式对象。
tabStyle:选项卡的样式对象。
allowFontScaling:标签字体是否应缩放以尊重文本大小辅助功能设置,默认为true。

navigationOptions

路由页面独立配置:
title:通用标题可以用作备用的headerTitletabBarLabel
tabBarVisible:如果未设置,则默认为true。显示:true或隐藏:false
tabBarIcon:React元素或给定的函数({ focused: boolean, tintColor: string })返回一个React.Node,以在标签栏中显示。
tabBarLabel:标签栏或React元素中显示的选项卡的标题字符串或给定的函数({ focused: boolean, tintColor: string })返回React.Node,以在标签栏中显示。未定义时,使用title。
tabBarOnPress:点按事件回调处理; 该参数是一个对象,其中包含:
+ previousScene: { route, index }
+ scene: { route, index }
+ jumpToIndex:函数参数,可以控制navigation跳转。

示例:

const RootStack = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: 'hahaha',
        tabBarVisible: true,
      }
    },
    Welcome: Welcome,
  },
  {
    initialRouteName: 'Home'
  }
)

2. createMaterialTopTabNavigator

屏幕顶部tab标签栏,可让点击或水平滑动来切换不同的路由。如图:

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);

RouteConfigs

路由配置对象

TabNavigatorConfig

  • initialRouteName – 初始路由的routeName。
  • order – 定义选项卡顺序的routeNames数组。
  • paths – 提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。
  • backBehavior – 点击后退按钮是否将标签切换到初始选项卡。如果是,则设置为initialRoute,否则none。默认为initialRoute行为。
  • swipeEnabled – 是否允许在标签之间滑动。
  • animationEnabled – 改变标签时是否进行动画制作。
  • configureTransition– 给定currentTransitionPropsnextTransitionProps返回一个描述选项卡之间动画的配置对象的函数。
  • initialLayout– 包含初始height和可选对象width,可以传递以防止[react-native-tab-view](https://github.com/react-native-community/react-native– tab-view#avoid-one-frame-delay)呈现中的一帧延迟。
  • tabBarComponent – 可选,覆盖要用作标签栏的组件。
  • tabBarOptions – 具有以下属性的对象:
    • activeTintColor – 活动选项卡的标签和图标颜色。
    • inactiveTintColor – 非活动选项卡的标签和图标颜色。
    • showIcon – 是否显示标签图标,默认为false。
    • showLabel – 是否显示标签,默认为true。
    • upperCaseLabel – 是否使标签大写,默认为true。
    • pressColor – 材质纹波的颜色(仅限Android> = 5.0)。
    • pressOpacity – 按下标签的不透明度(仅iOS和Android <5.0)。
    • scrollEnabled – 是否启用可滚动标签。
    • tabStyle – 选项卡的样式对象。
    • indicatorStyle – 选项卡指示符的样式对象(选项卡底部的长条)。
    • labelStyle – 标签标签的样式对象。
    • iconStyle – 选项卡图标的样式对象。
    • style – 标签栏的样式对象。
    • allowFontScaling – 标签字体是否应缩放以尊重文本大小辅助功能设置,默认为true。

navigationOptions

  • title:通用标题可以用作备用headerTitletabBarLabel
  • swipeEnabled:是否启用滑动切换,如果未设置,则默认为TabNavigatorConfig选项swipeEnabled
  • tabBarIcon:React元素或给定的函数({ focused: boolean, tintColor: string })返回一个React.Node,以在标签栏中显示。
  • tabBarLabel:标签栏或React元素中显示的选项卡的标题字符串或给定的函数({ focused: boolean, tintColor: string })返回React.Node,以在标签栏中显示。未定义时,使用场景title。要隐藏,请参阅tabBarOptions.showLabel上一节。
  • tabBarOnPress:点击事件回调; 该参数是一个对象,其中包含:
    • previousScene: { route, index }
    • 在scene: { route, index }
    • jumpToIndex:函数参数,可以控制navigation跳转。

3. createMaterialBottomTabNavigator

具有Material设计风格的createBottomTabNavigator组件。
使用此组建需要单独安装:

npm install react-navigation-material-bottom-tabs

此组建依赖react-native-vector-icons,需要单独安装。
使用:

createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);

RouteConfigs

路由配置对象

MaterialBottomTabNavigatorConfig

shifting – 是否使用移动样式,活动选项卡会变宽,而不活动选项卡不会有标签。当有三个以上的选项卡时,默认情况下是true。
activeTintColor – 活动选项卡的标签和图标颜色。
initialRouteName – 第一次加载时初始选项卡路由的routeName。
order – 定义选项卡顺序的routeNames数组。
paths – 提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。
backBehavior – 点击后退按钮是否将标签切换到初始选项卡。如果是,则设置为initialRoute,否则none。默认为initialRoute行为。

navigationOptions

title:通用标题可以用作备用headerTitle和tabBarLabel。
tabBarIcon:React元素或给定的函数{ focused: boolean, tintColor: string }返回一个React.Node,以在标签栏中显示。
tabBarColor:当屏幕对应的标签处于活动状态时,标签栏的颜色。
tabBarLabel:标签栏或React元素中显示的选项卡的标题字符串或给定的函数{ focused: boolean, tintColor: string }返回React.Node,以在标签栏中显示。未定义时,使用场景title。

4. 嵌套组合

有时候我们需要StackNavigatorTabNavigator结合使用,例如:

const HomeStack = createStackNavigator(
  {
    Home: Home
  }
)
const SettingStack = createStackNavigator(
  {
    Setting: Setting
  }
)
const RootStack = createBottomTabNavigator(
  {
    Home: HomeStack,
    Setting: SettingStack
  }
)

export default class App extends Component {
  render() {
    return <RootStack />
  }
}

这样在HomeSetting两个Tab标签都拥有了独立的导航栈。

赞(3) 打赏
未经允许不得转载:李帅帅空间 » React Navigation 指南 6:Tab navigation

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    厉害了帅学霸

    ayy5个月前 (05-15)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏