React Native react-navigation 导航使用详解(3)


labelStyle:label的样式安卓属性  

activeTintColor:label和icon的前景色 活跃状态下  

inactiveTintColor:label和icon的前景色 不活跃状态下  

showIcon:是否显示图标,默认关闭  

showLabel:是否显示label,默认开启 style:tabbar的样式  

labelStyle:label的样式 upperCaseLabel:是否使标签大写,默认为true  

pressColor:material涟漪效果的颜色(安卓版本需要大于5.0)  

pressOpacity:按压标签的透明度变化(安卓版本需要小于5.0)  

scrollEnabled:是否启用可滚动选项卡 tabStyle:tab的样式  

indicatorStyle:标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题  

labelStyle:label的样式  

iconStyle:图标样式 

3、DrawerNavigator属性介绍

DrawerNavigatorConfig  

  1. drawerWidth - 抽屉的宽度 
  2. drawerPosition - 选项是左或右。 默认为左侧位置 
  3. contentComponent - 用于呈现抽屉内容的组件,例如导航项。 接收抽屉的导航。 默认为DrawerItems 
  4. contentOptions - 配置抽屉内容  

initialRouteName - 初始路由的routeName  

order - 定义抽屉项目顺序的routeNames数组。  

路径 - 提供routeName到路径配置的映射,它覆盖routeConfigs中设置的路径。  

backBehavior - 后退按钮是否会切换到初始路由? 如果是,设置为initialRoute,否则为none。 默认为initialRoute行为  

DrawerItems的contentOptions属性  

  1. activeTintColor - 活动标签的标签和图标颜色  
  2. activeBackgroundColor - 活动标签的背景颜色  
  3. inactiveTintColor - 非活动标签的标签和图标颜色  
  4. inactiveBackgroundColor - 非活动标签的背景颜色  

内容部分的样式样式对象 

labelStyle - 当您的标签是字符串时,要覆盖内容部分中的文本样式的样式对象 
从上述中大致了解了react-navigation三种组件的一些基本属性,所以到我们甩起袖子撸代码见证下奇迹了。

4、使用StackNavigator + TabNavigator实现Tab界面切换、界面间导航

API定义:StackNavigator(RouteConfigs, StackNavigatorConfig)、TabNavigator(RouteConfigs, TabNavigatorConfig)

(1)集成 react-navigation:在终端执行 【 npm install react-navigation --save 】

(2)界面中导入必要组件:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/507.html