目录

ReactNative页面切换react-navigation导航器之TabNavigator的使用


一、前言:

  • 我们在前面已经学习了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传递给选项卡页面

      const TabNav = TabNavigator({
      	// config
      });
    
      < TabNav
      	screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
       />