StackNavigator
StackNavigator是最常用的导航器，用于普通页面的分页，它包括路由配置和初始化(StackNavigatorConfig)的设置，简单的配置如下：
const AppNavigator = StackNavigator({
'/': {
getScreen: () => require('./Home').default
},
'/settings': {
getScreen: () => require('./Settings').default
},
'/account': {
getScreen: () => require('./Account').default
}
}, {
headerMode: 'screen',
initialRouteName: '/',
mode: 'modal',
navigationOptions: {
headerStyle: {
backgroundColor: '#fff'
}
}
});
StackNavigatorConfig 属性介绍
-
initialRouteName: 页面默认进入的路由。 -
initialRouteParams: 默认路由所携带的参数。 -
paths: 此参数在app之间跳转起作用。 -
mode: 转场动画，card表示切换页面时是左右动画，modal表示切换页面时的动画是从下往上，该属性只在ios上起作用。 -
navigationOptions: (Screen Navigation Options)场景初始化参数，一般我们可以在某个场景的组件中声明，可覆盖最外层navigationOptions配置：
class Document extends Component {
static navigationOptions = ({ navigation: { navigate, goBack, state: { params } } }) => {
return {
mode: 'card',
headerTitle: <ContentTitles navigate={navigate} goBack={goBack} params={params} />,
headerLeft: <Back goBack={goBack} from={key} />,
headerRight: <ContentTools navigate={navigate} goBack={goBack} from={key} params={params} />
};
};
Screen Navigation Options属性介绍
-
title: 只能是string类型。 -
header: 如果两个场景对应的是同一个react element，需要将该属性置为null，否则会出现两个头部。 -
headerTitle: 当场景的头部是一个组件时，需要用到这个属性。 -
headerTitleStyle: Android下，title默认靠左，如下设置可使title居中显示：
headerTitleStyle: {
alignSelf: 'center'
}
-
headerLeft: 定义头部栏左边的组件。 -
headerRight: 定义头部栏右边的组件。 -
gesturesEnabled: 在该屏幕内手势是否可用。
TabNavigator
TabNavigator封装了tabBar，用于同一屏幕切换不同页面。简单配置如下：
const HomeNavigator = TabNavigator({
notification: {
screen: require('./Home/Notification').default
},
desktop: {
screen: require('./Home/Desktop').default
},
recent: {
screen: require('./Home/Recent').default
},
starred: {
screen: require('./Home/Starred').default
}
}, {
lazy: true,
order: ['notification', 'desktop', 'recent', 'starred'],
initialRouteName: 'desktop',
tabBarOptions: {
showLabel: false,
showIcon: true,
tabStyle: {
padding: 0
},
iconStyle: {
height: 50
}
},
headerMode: 'none',
tabBarPosition: 'bottom',
animationEnabled: false,
navigationOptions: {
...
}
});
TabNavigatorConfig属性介绍
-
lazy: 依赖加载。 -
order: tab bar 的顺序。 -
tabBarPosition: tab bar的位置，ios默认为bottom，android默认为top。 -
animationEnabled:切换tab的时候是否带动画。 -
tabBarOptions: x场景初始化参数。
tabBarOptions 属性介绍
-
style: tab bar 样式。 -
labelStyle: tab label 样式。 -
iconStyle: tab icon 样式。 -
activeTintColor/inactiveTintColor: 选中/未选中tab的颜色。 -
indicatorStyle: tab的下方是否有线条，该属性只用于android，默认为true。
