三种Navigator:
1.StackNavigator—通过进出栈的方式进行页面之间的跳转
iOS的跳转方式为从右边滑动进入新页面,android的跳转方式从底部淡入到新页面
方法:
StackNavigator(RouteConfigs, StackNavigatorConfig)
例子:
StackNavigator({
// For each screen that you can navigate to, create a new entry like this:
Profile: {
// `ProfileScreen` is a React component that will be the main content of the screen.
screen: ProfileScreen,
// When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.
// Optional: When deep linking or using react-navigation in a web app, this path is used:
path: 'people/:name',
// The action and route params are extracted from the path.
// Optional: Override the `navigationOptions` for the screen
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.name}'s Profile'`,
}),
},
...MyOtherRoutes,
});
告诉当前导航有多少页面,path和navigationOptions可以省略不写,每个页面都有自己的NavigationOptions,可以写在页面对应的js文件中
RouteConfigs:
API参数{screen ,path ,navigationOptions}
StackNavigatorConfig:
Options for the router:
initialRouteName
- 设置哪个页面为栈底页面. 必须是RouteConfig中的某一个页面.initialRouteParams
- 初始路由的参数navigationOptions
- 所有stack中页面的默认的navigationOptionspaths
- A mapping of overrides for the paths set in the route configs
Visual options:
mode
- Defines the style for rendering and transitions:card
- 使用标准的iOS、android跳转方式,默认是cardmodal
- iOS下页面从底部滑入,仅仅在iOS下有效在android下无效
headerMode
- Specifies how the header should be rendered: 一般这么写headerMode: Platform.OS === 'ios' ? 'float' : 'screen',
float
- Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.screen
- Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.none
- No header will be rendered.
cardStyle
- Use this prop to override or extend the default style for an individual card in stack.transitionConfig
- Function to return an object that overrides default screen transitions.onTransitionStart
- Function to be invoked when the card transition animation is about to start.onTransitionEnd
- Function to be invoked once the card transition animation completes.
NavigationOptions:
title
导航栏的标题以及tabbar的标题设置
header
React Element or a function that given HeaderProps
returns a React Element, to display as a header. 设置为null来隐藏导航栏
headerTitle
导航栏的标题. Defaults to scene title
headerBackTitle
iOS中导航栏的返回按钮的标题或者为null. Defaults to scene title
headerTruncatedBackTitle
Title string used by the back button when headerBackTitle
doesn't fit on the screen. "Back"
by default.
headerRight
导航栏右侧显示的React Element
headerLeft
导航栏左侧显示的React Element
headerStyle
Style object for the header
headerTitleStyle
Style object for the title component
headerBackTitleStyle
Style object for the back title
headerTintColor
Tint color for the header
headerPressColorAndroid
Color for material ripple (Android >= 5.0 only)
gesturesEnabled
Whether you can use gestures to dismiss this screen. Defaults to true on iOS, false on Android.
2.TabNavigator—tab栏切换
用于通过TabRouter轻松设置带有多个选项卡的屏幕。
方法:
TabNavigator(RouteConfigs, TabNavigatorConfig)
例子:
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} />
),
};
render() {
return (
<Button onPress={() => this.props.navigation.navigate('Notifications')} title="Go to notifications" />
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image source={require('./notif-icon.png')} style={[styles.icon, {tintColor: tintColor}]} />
),
};
render() {
return (
<Button onPress={() => this.props.navigation.goBack()} title="Go back home" />
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
RouteConfigs:
API参数{screen ,path ,navigationOptions}
TabNavigatorConfig:
tabBarComponent
- 要用作标签栏的组件,例如 (这是iOS上的默认设置), (这是Android上的默认设置)TabBarBottom
TabBarTop
tabBarPosition
- 标签栏的位置可以是或'top'
'bottom'
swipeEnabled
- 是否允许在标签之间进行滑动animationEnabled
- 是否在更改标签时进行动画处理lazy
- 是否根据需要懒惰呈现标签,而不是提前制作tabBarOptions
- 配置标签栏,如下所示。
几个选项被传递到底层路由器来修改导航逻辑:
initialRouteName
- 第一次加载时初始标签路由的routeNameorder
- 定义选项卡顺序的routeNames数组paths
- 将routeName映射到路径配置,该配置将覆盖routeConfigs中设置的路径。backBehavior
- 后退按钮是否会使Tab键切换到初始选项卡?如果是,否则设置。默认为行为。initialRoute
none
initialRoute
NavigationOptions:
title
#
通用标题可以用作备用和headerTitle
tabBarLabel
tabBarVisible
True或false显示或隐藏选项卡栏,如果未设置,则默认为true
tabBarIcon
React Element或者一个给定的函数返回一个React.Element,以在tab栏中显示{ focused: boolean, tintColor: string }
tabBarLabel
标签栏或React元素中显示的标签的标题字符串或者给定的函数返回一个React.Element,以在标签栏中显示。当未定义时,使用场景。要隐藏,请参见上一节。{ focused: boolean, tintColor: string }
title
tabBarOptions.showLabel
tabBarOptions
for (iOS上的默认标签栏) TabBarBottom
activeTintColor
- 活动标签的标签和图标颜色activeBackgroundColor
- 活动选项卡的背景颜色inactiveTintColor
- 不活动标签的标签和图标颜色inactiveBackgroundColor
- 非活动标签的背景颜色showLabel
- 是否显示标签的标签,默认为truestyle
- 标签栏的样式对象labelStyle
- 标签标签的样式对象tabStyle
- 标签的样式对象
例:
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
}
tabBarOptions
for (Android上的默认标签栏) TabBarTop
activeTintColor
- 活动标签的标签和图标颜色inactiveTintColor
- 不活动标签的标签和图标颜色showIcon
- 是否显示标签的图标,默认值为falseshowLabel
- 是否显示标签的标签,默认为trueupperCaseLabel
- 是否使标签大写,默认为truepressColor
- 颜色纹理(Android> = 5.0)pressOpacity
- 按压标签的不透明度(iOS和Android <5.0 only)scrollEnabled
- 是否启用可滚动选项卡tabStyle
- 标签的样式对象indicatorStyle
- 标签指示器的样式对象(选项卡底部的行)labelStyle
- 标签标签的样式对象iconStyle
- 标签图标的样式对象style
- 标签栏的样式对象
例:
tabBarOptions: {
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 100,
},
style: {
backgroundColor: 'blue',
},
}
3.DrawerNavigator—抽屉
方法:
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
例子:
class MyHomeScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} />
),
};
render() {
return (
<Button onPress={() => this.props.navigation.navigate('Notifications')} title="Go to notifications" />
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({ tintColor }) => (
<Image source={require('./notif-icon.png')} style={[styles.icon, {tintColor: tintColor}]} />
),
};
render() {
return (
<Button onPress={() => this.props.navigation.goBack()} title="Go back home" />
);
}
}
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
});
const MyApp = DrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
打开和关闭抽屉
this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer
RouteConfigs:
API参数{screen ,path ,navigationOptions}
DrawerNavigatorConfig:
-
-
drawerWidth
- 抽屉的宽度 -
drawerPosition
- 选项是或。默认是位置。left
right
left
-
contentComponent
- 用于呈现抽屉内容的组件,例如导航项。接收抽屉的支柱。默认为。有关详细信息,请参阅下文。navigation
DrawerItems
-
contentOptions
- 配置抽屉内容,见下文。
几个选项被传递到底层路由器来修改导航逻辑:
-
initialRouteName
- 初始路由的routeName。 -
order
- 定义抽屉物品顺序的routeNames数组。 -
paths
- 将routeName映射到路径配置,该配置将覆盖routeConfigs中设置的路径。 -
backBehavior
- 后退按钮是否会切换到初始路线?如果是,否则设置。默认为行为。initialRoute
none
initialRoute
提供自定义抽屉contentComponent:
-
-
import { DrawerItems } from 'react-navigation'; const CustomDrawerContentComponent = (props) => ( <View style={style.container}> <DrawerItems {...props} /> </View> ); const styles = StyleSheet.create({ container: { flex: 1, }, });
contentOptions for DrawerItems:
items
- 路由数组,可以修改或覆盖activeItemKey
- 标识活动路线的钥匙activeTintColor
- 活动标签的标签和图标颜色activeBackgroundColor
- 活动标签的背景颜色inactiveTintColor
- 无效标签的标签和图标颜色inactiveBackgroundColor
- 非活动标签的背景颜色onItemPress(route)
- 按下项目时调用的功能style
- 内容部分的样式对象labelStyle
- 当您的标签是字符串时,样式对象将覆盖内容部分中的样式Text
NavigationOptions:
title
通用标题可以用作备用和headerTitle
drawerLabel
drawerLabel
String,React元素或给定的函数返回一个React.Element,显示在抽屉侧边栏中。当不确定,现场使用{ focused: boolean, tintColor: string }
title
drawerIcon
#
React Element或一个函数,返回一个React.Element,显示在抽屉侧边栏中{ focused: boolean, tintColor: string }
tabBarOptions
for (iOS上的默认标签栏) TabBarBottom
activeTintColor
- 活动标签的标签和图标颜色activeBackgroundColor
- 活动选项卡的背景颜色inactiveTintColor
- 不活动标签的标签和图标颜色inactiveBackgroundColor
- 非活动标签的背景颜色showLabel
- 是否显示标签的标签,默认为truestyle
- 标签栏的样式对象labelStyle
- 标签标签的样式对象tabStyle
- 标签的样式对象
例:
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
}
tabBarOptions
for (Android上的默认标签栏) TabBarTop
activeTintColor
- 活动标签的标签和图标颜色inactiveTintColor
- 不活动标签的标签和图标颜色showIcon
- 是否显示标签的图标,默认值为falseshowLabel
- 是否显示标签的标签,默认为trueupperCaseLabel
- 是否使标签大写,默认为truepressColor
- 颜色纹理(Android> = 5.0)pressOpacity
- 按压标签的不透明度(iOS和Android <5.0 only)scrollEnabled
- 是否启用可滚动选项卡tabStyle
- 标签的样式对象indicatorStyle
- 标签指示器的样式对象(选项卡底部的行)labelStyle
- 标签标签的样式对象iconStyle
- 标签图标的样式对象style
- 标签栏的样式对象
例:
tabBarOptions: {
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 100,
},
style: {
backgroundColor: 'blue',
},
}