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

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

createMaterialTopTabNavigator.png

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 页嵌套在到 中。如果是,一旦该 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的更多高级应用

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前言 xi 第1章 初识React Native 1 1.1 React Native 的优点 2 1.2 风险和缺点 4 1.3 小结 4 第2章 React Native 工作原理 5 2.1 React Native 是如何工作的 5 2.2 渲染周期 7 2.3 在React Native 中创建组件 2.4 宿主平台接口 11 2.5 小结 12 第3章 构建你的第一个应用 13 3.1 搭建环境 13 3.2 创建一个新的应用 17 3.3 探索示例代码 24 3.4 开发天气应用 27 3.5 小结 40 第4章 移动应用组件 42 4.1 类比HTML 元素与原生组件 42 4.2 处理触摸和手势 46 4.3 使用结构化组件 58 4.4 平台特定组件 69 4.5 小结 74 第5章 样式 75 5.1 声明和操作样式 75 5.2 组织和继承 79 5.3 定位和设计布局 81 5.4 小结 91 第6章 平台接口 92 6.1 使用定位接口 93 6.2 使用用户图片与摄像头 6.3 AsyncStore 持久化数据存储 108 6.4 智能天气应用 109 6.5 小结 119 第7章 模块 120 7.1 使用npm 安装JavaScript 类库 120 7.2 iOS 原生模块 121 7.3 Android 原生模块 130 7.4 跨平台原生模块 139 7.5 小结 141 第8章 调试与开发者工具 142 8.1 JavaScript 调试实践和解释 142 8.2 React Native 调试工具 147 8.3 JavaScript 之外的调试方法 152 8.4 测试代码 158 8.5 当你陷入困境 160 8.6 小结 160 第9章 学以致用 161 9.1 闪卡应用 161 9.2 模型与数据存储 168 9.3 使用Navigator 177 9.4 探索第三方依赖 180 9.5 响应式设计与字体尺寸 180 9.6 小结及任务 183 第10章 部署至iOS 应用商店 184 10.1 准备Xcode 工程 184 10.2 上传应用 192 10.3 使用TestFlight 进行Beta 测试 199 10.4 提交应用审核 200 10.5 小结 201 第11章 部署Android 应用 203 11.1 设置应用图标 203 11.2 生成release 版本的APK 205 11.3 通过邮件或链接发布 207 11.4 提交应用至Play 商店 207 11.5 小结 214 总结 215 附录A ES6 语法 216 附录B 命令与快速入门指南 219 作者简介 221 关于封面 221

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值