React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南

这篇文章将向大家分享createMaterialTopTabNavigator的一些开发指南和实用技巧。

createMaterialTopTabNavigator API

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):

  • RouteConfigs(必选):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由呈现什么。
  • TabNavigatorConfig(可选):配置导航器的路由(如:默认首屏,navigationOptions,paths等)样式(如,转场模式mode、头部模式等)。

从createMaterialTopTabNavigator API上可以看出createMaterialTopTabNavigator支持通过RouteConfigsTabNavigatorConfig两个参数来创建createMaterialTopTabNavigator导航器。

RouteConfigs

RouteConfigs支持三个参数screenpath以及navigationOptions

  • screen(必选):指定一个 React 组件作为屏幕的主要显示内容,当这个组件被TabNavigator加载时,它会被分配一个navigation prop。
  • path(可选):用来设置支持schema跳转时使用,具体使用会在下文的有关Schema章节中讲到;
  • navigationOptions(可选):用以配置全局的屏幕导航选项如:title、headerRight、headerLeft等;

TabNavigatorConfig

  • tabBarComponent:指定TabNavigator的TabBar组件;
  • tabBarPosition: 用于指定TabBar的显示位置,支持'top' 与 'bottom'两种方式;
  • swipeEnabled : 是否可以左右滑动切换tab;
  • lazy - 默认值是 false。如果是true,Tab 页只会在被选中或滑动到该页时被渲染。当为 false 时,所有的 Tab 页都将直接被渲染;(可以轻松实现多Tab 页面的懒加载);
  • optimizationsEnabled -是否将 Tab 页嵌套在到 <ResourceSavingScene /> 中。如果是,一旦该 Tab 页失去焦点,将被移出当前页面, 从而提高内存使用率。
  • animationEnabled : 切换页面时是否有动画效果。
  • initialLayout : 包含初始高度和宽度的可选对象可以被传递以防止react-native-tab-view呈现中的一个帧延迟;
  • tabBarOptions: 配置TaBar下文会详细讲解;
  • initialRouteName : 默认页面组件,TabNavigator显示的第一个页面;
  • order: 定义tab顺序的routeNames数组。
  • paths: 提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。
  • backBehavior: 后退按钮是否会导致标签切换到初始tab? 如果是,则设切换到初始tab,否则什么也不做。 默认为切换到初始tab。

tabBarOptions(tab配置)

  • activeTintColor: 设置TabBar选中状态下的标签和图标的颜色;
  • inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色;
  • showIcon: 是否展示图标,默认是false;
  • showLabel: 是否展示标签,默认是true;
  • upperCaseLabel - 是否使标签大写,默认为true。
  • tabStyle: 设置单个tab的样式;
  • indicatorStyle: 设置 indicator(tab下面的那条线)的样式;
  • labelStyle: 设置TabBar标签的样式;
  • iconStyle: 设置图标的样式;
  • style: 设置整个TabBar的样式;
  • allowFontScaling: 设置TabBar标签是否支持缩放,默认支持;
  • pressColor -Color for material ripple(仅支持 Android >= 5.0;
  • pressOpacity -按下标签时的不透明度(支持 iOS 和 Android < 5.0);
  • scrollEnabled -是否支持 选项卡滚动

eg:

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: 'blue',
  },
}

navigationOptions(屏幕导航选项)

createMaterialTopTabNavigator支持的屏幕导航选项的参数有:

  • title: 可以用作headerTitle和tabBarLabel的备选的通用标题。
  • swipeEnabled:是否允许tab之间的滑动切换,默认允许;
  • tabBarIcon: 设置TabBar的图标;
  • tabBarLabel: 设置TabBar的标签;
  • tabBarOnPress: Tab被点击的回调函数,它的参数是一保函一下变量的对象:
    • navigation:页面的 navigation props
    • defaultHandler: tab press 的默认 handler
  • tabBarAccessibilityLabel:选项卡按钮的辅助功能标签。 当用户点击标签时,屏幕阅读器会读取这些信息。 如果您没有选项卡的标签,建议设置此项;
  • tabBarTestID:用于在测试中找到该选项卡按钮的 ID;

【案例1】使用createMaterialTopTabNavigator做界面导航、配置navigationOptions

createBottomTabNavigator

第一步:创建一个createMaterialTopTabNavigator类型的导航器

export const MaterialTopTabNavigator = createMaterialTopTabNavigator({//在这里配置页面的路由
        Page1: {
            screen: Page1,
            navigationOptions: {
                tabBarLabel: 'Page10',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-home'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        Page4: {
            screen: Page4,
            navigationOptions: {
                tabBarLabel: 'Page2',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-people'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        Page3: {
            screen: Page3,
            navigationOptions: {
                tabBarLabel: 'Page3',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-chatboxes'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
    },
    {
        tabBarOptions: {
            tabStyle: {
                minWidth: 50
            },
            upperCaseLabel: false,//是否使标签大写,默认为true
            scrollEnabled: true,//是否支持 选项卡滚动,默认false
            // activeTintColor: 'white',//label和icon的前景色 活跃状态下(选中)
            // inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下(未选中)
            style: {
                backgroundColor: '#678',//TabBar 的背景颜色
            },
            indicatorStyle: {
                height: 2,
                backgroundColor: 'white',
            },//标签指示器的样式
            labelStyle: {
                fontSize: 13,
                marginTop: 6,
                marginBottom: 6,
            },//文字的样式
        },
    }
)

第二步:配置navigationOptions:

TabNavigator的navigationOptions有两个关键的属性,tabBarLabel标签与tabBarIcon图标:

Page2: {
    screen: Page2,
    navigationOptions: {
        tabBarLabel: 'Page2',
        tabBarIcon: ({tintColor, focused}) => (
            <Ionicons
                name={focused ? 'ios-people' : 'ios-people-outline'}
                size={26}
                style={{color: tintColor}}
            />
        ),
    }
},

在上述代码中使用了react-native-vector-icons的矢量图标作为Tab的显示图标,tabBarIcon接收一个React 组件,大家可以根据需要进行定制:

  • tintColor: 当前状态下Tab的颜色;
  • focused: Tab是否被选中;

第三步:界面跳转

 const {navigation} = this.props;
 ...
 <Button
    title="跳转到页面4"
    onPress={() => {
        navigation.navigate("Page4",{ name: 'Devio' })
    }}
/>

代码解析:

页面跳转可分为两步:

    1. 获取navigation:
    const {navigation} = this.props;
    
    1. 通过navigate(routeName, params, action)进行页面跳转:
     navigation.navigate('Page2');
     navigation.navigate('Page3',{ name: 'Devio' });
    

    这里在跳转到Page3的时候传递了参数{ name: 'Devio' }

【高级案例】react-navigation的高级应用

在使用react-navigation时往往有些需求通过简单的配置是无法完成的,比如:

  • 动态配置createMaterialTopTabNavigator:官方只提供了TabNavigator中的页面的静态配置方式,如果TabNavigator中的页面不固定,需要动态生成那么需要怎么做呢?
  • 动态配置createMaterialTopTabNavigator的样式:通过官方的文档是无法实现动态改变TabNavigator的样式的,比如:修改显示的文字,修改字体颜色,修改图标等等;
  • 多层嵌套后路由个性化定制:createMaterialTopTabNavigator被包裹后在TabNavigator中的页面是无法借助navigation跳转到外层StackNavigator中的页面的,这种应用场景很多,尤其是你需要定制TabNavigator的时候;
  • 初始化传参:如何在设置页面的时候传递参数呢?

类似上述的应用场景有很多,大家可以通过与本教程配套的最新版React Native+Redux打造高质量上线App视频教程进行进一步学习react-navigation的更多高级应用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342