react-navigation

TabNavigator的使用

定义一个整体的tab属性

import {TabNavigator,StackNavigator,TabBarBottom} from 'react-navigation'

const MyTab = TabNavigator({Home: {screen: Main,navigationOptions: ({navigation}) => ({  tabBarLabel:'主页'  }),  },Manage: {screen: UserManage,navigationOptions: ({navigation}) => ({  tabBarLabel:'管理'  }),  },Today: {screen: UserToday,navigationOptions: ({navigation}) => ({  tabBarLabel:'今日'  }),  }
}, {tabBarComponent:TabBarBottom,，animationEnabled: false, // 切换页面时是否有动画效果tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的swipeEnabled: true, // 是否可以左右滑动切换tabbackBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转lazy:true, tabBarOptions: {activeTintColor: '#ff8500', // 文字和图片选中颜色inactiveTintColor: '#999', // 文字和图片未选中颜色showIcon: false, // android 默认不显示 icon, 需要设置为 true 才会显示
        indicatorStyle: {height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
        }, style: {backgroundColor: '#fff', // TabBar 背景色// height: 30
        },labelStyle: {fontSize: 20, // 文字大小
        },},
});Main、UserManage、UserToday是react组件

tabBarComponent:TabBarBottom //这一条一定要加，不加跳转有卡顿，TabBarBottom引用自react-navgition

// 渲染返回定义好的tabrender(){return(<MyTab/>)
}

转载于:https://www.cnblogs.com/insight0912/p/7772831.html

react-navigation相关推荐

使用Redux在React Navigation App中管理状态
by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...
react navigation 中使用goBack()跳转到指定页面
一.适用场景: 在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A-->B-->C-->D 要想从D页面直接返回到B页 ...
RN路由-React Navigation组件5.x-基本原理(中文文档)
##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本 ...
React Navigation 基本使用
React Navigation 基本使用参考资料 https://reactnavigation.org/docs/ 环境搭建 Minimum requirementsreact-native & ...
React Navigation 路由导航库升级 5.x
当前版本:3.0.0 升级版本:5.12.8 安装依赖 $ yarn add @react-navigation/native @react-navigation/stack @react ...
react navigation中使用goBack返回指定页面
goBack 首先, 现在看一下react navigation官网中对goBack的描述: goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所 ...
Facebook力推导航库:React Navigation使用详解
本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍今年1月份,新开源的react- ...
React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...
React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
解决React Navigation goBack()无效
import { StackActions } from "react-navigation"; const popAction = StackActions.pop({n: 1} ...

react-navigation

react-navigation相关推荐

最新文章

热门文章