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

2018-01-27 约 1606 字预计阅读 4 分钟次阅读

更多分享：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 - 指示器的样式

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 */}
   />

目录

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

一、前言：

二、入坑

配置tab名称和icon

IOS的样式

Android的样式

Screen Navigation Options

Navigator Props