文章基于 react-navigation
v2.0.1
移动应用中最常见的导航风格是基于标签的导航。可以在屏幕底部或者顶部生成Tab导航。
和v1.x
中不同的是,由TabNavigator
变更为createBottomTabNavigator
和createMaterialTopTabNavigator
。
1. createBottomTabNavigator
底部tab导航,如图:
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);
示例
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
export default createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
RouteConfigs
路由配置对象
BottomTabNavigatorConfig
initialRouteName
:初始路由名称。
order
:定义选项卡顺序的routeNames
数组。
paths
:提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。
backBehavior
:点击后退按钮是否将标签切换到初始选项卡。如果是,则设置为initialRoute
,否则none
。默认为initialRoute
行为。
tabBarComponent
:可选,覆盖标签栏的组件。
tabBarOptions
:具有以下属性的对象:
– activeTintColor
:活动选项卡的标签和图标颜色。
– activeBackgroundColor
:活动选项卡的背景颜色。
– inactiveTintColor
:非活动选项卡的标签和图标颜色。
– inactiveBackgroundColor
:非活动选项卡的背景颜色。
– showLabel
:是否显示文字,默认为true。
– style
:标签栏的样式对象。
– labelStyle
:标签标签的样式对象。
– tabStyle
:选项卡的样式对象。
– allowFontScaling
:标签字体是否应缩放以尊重文本大小辅助功能设置,默认为true。
navigationOptions
路由页面独立配置:
title
:通用标题可以用作备用的headerTitle
和tabBarLabel
。
tabBarVisible
:如果未设置,则默认为true
。显示:true
或隐藏:false
。
tabBarIcon
:React元素或给定的函数({ focused: boolean, tintColor: string }
)返回一个React.Node,以在标签栏中显示。
tabBarLabel
:标签栏或React元素中显示的选项卡的标题字符串或给定的函数({ focused: boolean, tintColor: string }
)返回React.Node,以在标签栏中显示。未定义时,使用title。
tabBarOnPress
:点按事件回调处理; 该参数是一个对象,其中包含:
+ previousScene: { route, index }
+ scene: { route, index }
+ jumpToIndex:函数参数,可以控制navigation跳转。
示例:
const RootStack = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
title: 'hahaha',
tabBarVisible: true,
}
},
Welcome: Welcome,
},
{
initialRouteName: 'Home'
}
)
2. createMaterialTopTabNavigator
屏幕顶部tab标签栏,可让点击或水平滑动来切换不同的路由。如图:
createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);
RouteConfigs
路由配置对象
TabNavigatorConfig
initialRouteName
– 初始路由的routeName。order
– 定义选项卡顺序的routeNames数组。paths
– 提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。backBehavior
– 点击后退按钮是否将标签切换到初始选项卡。如果是,则设置为initialRoute
,否则none
。默认为initialRoute
行为。swipeEnabled
– 是否允许在标签之间滑动。animationEnabled
– 改变标签时是否进行动画制作。configureTransition
– 给定currentTransitionProps
和nextTransitionProps
返回一个描述选项卡之间动画的配置对象的函数。initialLayout
– 包含初始height和可选对象width,可以传递以防止[react-native-tab-view](https://github.com/react-native-community/react-native– tab-view#avoid-one-frame-delay)呈现中的一帧延迟。tabBarComponent
– 可选,覆盖要用作标签栏的组件。tabBarOptions
– 具有以下属性的对象:activeTintColor
– 活动选项卡的标签和图标颜色。inactiveTintColor
– 非活动选项卡的标签和图标颜色。showIcon
– 是否显示标签图标,默认为false。showLabel
– 是否显示标签,默认为true。upperCaseLabel
– 是否使标签大写,默认为true。pressColor
– 材质纹波的颜色(仅限Android> = 5.0)。pressOpacity
– 按下标签的不透明度(仅iOS和Android <5.0)。scrollEnabled
– 是否启用可滚动标签。tabStyle
– 选项卡的样式对象。indicatorStyle
– 选项卡指示符的样式对象(选项卡底部的长条)。labelStyle
– 标签标签的样式对象。iconStyle
– 选项卡图标的样式对象。style
– 标签栏的样式对象。allowFontScaling
– 标签字体是否应缩放以尊重文本大小辅助功能设置,默认为true。
navigationOptions
title
:通用标题可以用作备用headerTitle
和tabBarLabel
。swipeEnabled
:是否启用滑动切换,如果未设置,则默认为TabNavigatorConfig
选项swipeEnabled
。tabBarIcon
:React元素或给定的函数({ focused: boolean, tintColor: string }
)返回一个React.Node,以在标签栏中显示。tabBarLabel
:标签栏或React元素中显示的选项卡的标题字符串或给定的函数({ focused: boolean, tintColor: string }
)返回React.Node,以在标签栏中显示。未定义时,使用场景title。要隐藏,请参阅tabBarOptions.showLabel上一节。tabBarOnPress
:点击事件回调; 该参数是一个对象,其中包含:- previousScene: { route, index }
- 在scene: { route, index }
- jumpToIndex:函数参数,可以控制navigation跳转。
3. createMaterialBottomTabNavigator
具有Material设计风格的createBottomTabNavigator
组件。
使用此组建需要单独安装:
npm install react-navigation-material-bottom-tabs
此组建依赖react-native-vector-icons
,需要单独安装。
使用:
createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);
RouteConfigs
路由配置对象
MaterialBottomTabNavigatorConfig
shifting
– 是否使用移动样式,活动选项卡会变宽,而不活动选项卡不会有标签。当有三个以上的选项卡时,默认情况下是true。
activeTintColor
– 活动选项卡的标签和图标颜色。
initialRouteName
– 第一次加载时初始选项卡路由的routeName。
order
– 定义选项卡顺序的routeNames数组。
paths
– 提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。
backBehavior
– 点击后退按钮是否将标签切换到初始选项卡。如果是,则设置为initialRoute
,否则none
。默认为initialRoute
行为。
navigationOptions
title
:通用标题可以用作备用headerTitle和tabBarLabel。
tabBarIcon
:React元素或给定的函数{ focused: boolean, tintColor: string }返回一个React.Node,以在标签栏中显示。
tabBarColor
:当屏幕对应的标签处于活动状态时,标签栏的颜色。
tabBarLabel
:标签栏或React元素中显示的选项卡的标题字符串或给定的函数{ focused: boolean, tintColor: string }返回React.Node,以在标签栏中显示。未定义时,使用场景title。
4. 嵌套组合
有时候我们需要StackNavigator
和TabNavigator
结合使用,例如:
const HomeStack = createStackNavigator(
{
Home: Home
}
)
const SettingStack = createStackNavigator(
{
Setting: Setting
}
)
const RootStack = createBottomTabNavigator(
{
Home: HomeStack,
Setting: SettingStack
}
)
export default class App extends Component {
render() {
return <RootStack />
}
}
这样在Home
和Setting
两个Tab标签都拥有了独立的导航栈。
厉害了帅学霸