ReactNative页面切换react-navigation导航器之TabNavigator的使用
目录
- 更多分享:www.catbro.cn
一、前言:
- 我们在前面已经学习了StackNavigator的基本使用,TabNavigator的使用方式基本与StackNavigator差不多
二、入坑
-
同样,我们第一步创建一个导航器,然后将页面组件放入进行初始化
const RootTabs = TabNavigator({ User: { screen: UserPager }, Ticket: { screen: TicketPager }, Order: { screen: OrderPager } },{ tabBarPosition: 'bottom', animationEnabled: true, tabBarOptions: { activeTintColor: '#e91e63', }} ); export default class HomePager extends Component { render() { return <RootTabs />; } }
配置tab名称和icon
-
默认的,如果配置,tab中label默认显示的名称即为页面对应的name(User,Ticket,Order),当然你可以直接把它改成你想要的名字,但是这是不符合实际需要的,而且我们一般还会有icon
-
需要实现上面要求,我们可以通过在陪你screen时传入第二个参数:navigationOptions
-
代码如下
const RootTabs = TabNavigator({ User: { screen: UserPager, navigationOptions:{ tabBarLabel: '个人', tabBarIcon: ({ tintColor }) => ( <Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), } }, Ticket: { screen: TicketPager, navigationOptions:{ tabBarLabel: '个人', tabBarIcon: ({ tintColor }) => ( <Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), } }, Order: { screen: OrderPager, navigationOptions:{ tabBarLabel: '个人', tabBarIcon: ({ tintColor }) => ( <Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), } } },{ tabBarPosition: 'bottom', animationEnabled: true, tabBarOptions: { activeTintColor: '#e91e63', }, } , ); export default class HomePager extends Component { render() { return <RootTabs />; } }
-
通过传入navigationOptions我们可以设置标题、图标等
- 如上创建了三个页面,android默认tab是在顶部的,ios在底部,我们可以通过在创建的时候传入第二个配置参数对象来进行配置,如 :
- tabBarPosition: ‘bottom|top’ - tab位置
- animationEnabled: true|false -切换时是否需要动画
- tabBarComponent: -自定义tab组件,看个人需求
- swipeEnabled:true|false -是否开启滑动
- configureTransition(currentTransitionProps,nextTransitionProps) : 配置两个tab间切换的动画,定义时需要返回一个configuration 对象去描述动画的执行
- initialLayout : 可选的,配置一个初始化的宽度和高度,通过配置initialLayout可以防止 react-native-tab-view 渲染的延迟
- initialRouteName: 配置第一个初始化的页面
- order:定义tabar中每个 tab的顺序
- paths:提供routeName到path config的映射,它覆盖routeConfigs中设置的路径
- backBehavior:定义按下返回按钮的行为,默认在tabs页面,其会返回到初始化默认路由页面,默认为initialRoute行为,不需要则设置为none
- tabBarOptions: 配置tabar中每个tab的参数,如样式等
-
IOS的样式
- activeTintColor - 处于选中状态的Label and icon color
- activeBackgroundColor - 选中状态时的tab的背景颜色
- inactiveTintColor - 非选中状态的Label and icon color
- inactiveBackgroundColor - 非选中状态时的tab的背景颜色
- showLabel - tab中是否展示label, 默认是 true,只需要图片着设置为false
- style - tab bar的样式 .
- labelStyle - tab label的样式
- tabStyle - tab的样式
- allowFontScaling - lable中的文字的大小是否动变大或缩小
Android的样式
- activeTintColor - 处于选中状态的Label and icon color
- activeBackgroundColor - 选中状态时的tab的背景颜色
- showLabel - tab中是否展示label, 默认是 true,只需要图片着设置为false
- pressColor -压下时的颜色,android5.0之后生效
- pressOpacity - 压下时的透明度,android小于5.0
- scrollEnabled - tab数量多时是否可滚动
- tabStyle - tab的样式
- labelStyle - tab label的样式
- tabStyle - tab的样式
- style - tab bar的样式 .
- allowFontScaling - lable中的文字的大小是否动变大或缩小
- upperCaseLabel -label中字母是否按大写显示,默认ture
- indicatorStyle - 指示器的样式
Screen Navigation Options
- title 生成一个可以作为返回作用的头部title和tabBarLabel
- tabBarVisible - tabBar 是否可见,默认true
- swipeEnabled - 子选项卡可重写TabNavigatorConfig 设置的swipeEnabled属性,
- tabBarIcon React Element or a function that given { focused: boolean, tintColor: string } returns a React.Node, to display in tab bar.
- tabBarLabel Title string of a tab displayed in the tab bar or React Element or a function that given { focused: boolean, tintColor: string } returns a React.Node, to display in tab bar. When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
- tabBarOnPress Callback to handle tap events; the argument is an object containing: the previousScene: { route, index } which is the scene we are leaving the scene: { route, index } that was tapped the jumpToIndex method that can perform the navigation for you Useful for adding a custom logic before the transition to the next scene (the tapped one) starts.
Navigator Props
-
通过Navigator Props 除来navigator默认传递的,我们可以将一些数据通过props传递给选项卡页面
const TabNav = TabNavigator({ // config }); < TabNav screenProps={/* this prop will get passed to the screen components as this.props.screenProps */} />