入门：
React Navigation诞生于React Native社区需要一个由javascript编写的扩展且易于使用的导航解决方案。目前react-navigation已经更新到3.x版本了。如果对react-navigation不了解的可以先看React Native Express(http://www.reactnativeexpress.com/)前4章
什么是导航器：
导航器可以看作是一个普通的React组件，可以通过导航器来定义APP的导航结构，导航器还可以渲染通用元素，比如配置标题栏和选项卡栏，在React-navigation中有一下三种类型的导航器：createStackNavigator，createSwitchNavigator，createDrawerNavigator，createBottomTabNavigator，createMaterialBottomTabNavigator，createMaterialTopTabNavigator等，详情请看官网：https://reactnavigation.org/docs/en/material-top-tab-navigator.html
两个与导航器相关的概念：
- navigation prop(屏幕导航属性)：通过navigation可以完成屏幕之间的调度操作
- navigationOptions(屏幕导航选项)：通过navigationOptions可以定制导航器显示屏幕的方式（头部标题，选项卡标签等）
Navigation prop 详解
当导航器中的屏幕被打开时，会收到一个navigation prop，navigation包含以下功能
- navigate - 转跳到其他界面
class ProfileScreen extends React.Component {
render() {
return (
<Button
onPress={()=>navigation('Profile', {name: '稻城'})}
title="Set title name to '稻城'"
/>
);
}
}
- goback - 关闭当前界面
class ProfileScreen extends React.Component {
render() {
return (
<Button
onPress={goBack()}
title="Set title name to '稻城'"
/>
);
}
}
- addListener - 订阅导航生命周期的更新
- isFocused - 一个函数返回true或false，查询屏幕是否获取焦点
- state - 屏幕当前的state
class ProfileScreen extends React.Component {
render() {
const params = this.props.navigation.state
return <Text>Name: {params.name}</Text>;
}
}
- setParams - 改变路由的params
class ProfileScreen extends React.Component {
render() {
return (
<Button
onPress={() => this.props.navigation.setParams({ name: 'Lucy' })}
title="Set title name to '稻城'"
/>
);
}
}
- dispatch - 向路由发送一个action
import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
// navigate can have a nested navigate action that will be run inside the child router
action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});
this.props.navigation.dispatch(navigateAction);
- dangerouslyGetParent - 返回父导航器的函数
navigation有一下几种方式：
- push - 将新路由推入堆栈
navigation.push(routeName, params, action)
- pop - 回到堆栈中
navigation.pop(n) //n为在路由堆栈中的第几个screen
- popToTop - 转到堆栈顶部
navigation.popToTop()
- replace - 用新的路由替换当前路由
navigation.replace(routeName, params, action)
- reset - 删除所有的navigation state并且使用这个reset的代替
navigation.reset([NavigationActions.navigate({ routeName: 'Profile' })], 0
- dismiss - 关闭当前堆栈
navigation.dismiss()
createStackNavigator的使用
为APP提供一种在屏幕之间转换的方式，其中每个新屏幕都放置在堆栈顶部。默认情况下，堆栈导航器配置为具有熟悉的iOS和Android外观：新的屏幕从iOS右侧滑入，从Android底部淡入。在iOS上，堆栈导航器也可以配置为模式样式，屏幕从底部滑入。
API的定义
createStackNavigator(RouteConfigs, StackNavigatorConfig);
RouteConfigs
route configs对象是从路由名称到路由配置的映射，它告诉导航器为该路由提供什么。
createStackNavigator({
// 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,
});
StackNavigatorConfig
路由器的选项
- initialRouteName - 设置堆栈的默认屏幕。必须匹配路由配置中的一个键
- initialRouteParams - 初始路线的参数
- initialRouteKey - 初始路由的可选标识符
- defaultNavigationOptions - 用于屏幕的默认导航选项
- paths - 路径配置中设置的路径的覆盖映射
视觉选项
- mode - 定义渲染和过渡的样式：
- card - 使用标准的iOS和Android屏幕过渡。这是默认值。
- modal - 使屏幕从底部滑入，这是一种常见的iOS模式。仅适用于iOS，对Android没有影响。
- headerMode - 指定标头的呈现方式：
- float - 渲染单个标题，保持在顶部，并在屏幕更改时设置动画。这是iOS上的常见模式。
- screen - 每个屏幕都附有一个标题，标题与屏幕一起淡入淡出。这是Android上的常见模式。
- none - 不会呈现标题。
- headerBackTitleVisible- 提供了合理的默认值，以确定后退按钮标题是否可见，但如果要覆盖可以使用true或false在此选项中。
- headerTransitionPreset- 指定headerMode: float启用时标头应如何从一个屏幕转换到另一个屏幕。
- fade-in-place - 标题组件交叉淡入淡出而不移动，类似于iOS的Twitter，Instagram和Facebook应用程序。这是默认值。
- uikit - iOS的默认行为的近似值。
- headerLayoutPreset - 指定如何布置标题组件。
- left - 将标题锚定在左侧，靠近后退按钮或其他左侧组件。这是Android上的默认设置。在iOS上使用时，隐藏标题后退标题。左侧组件中的内容将溢出标题下方，如果您需要调整此内容，则可以使用headerLeftContainerStyle和headerTitleContainerStyle。此外，此对齐与此不兼容headerTransitionPreset: 'uikit'。
- center - 将标题居中，这是iOS上的默认设置。
- cardStyle - 使用此prop可以覆盖或扩展堆栈中单个卡的默认样式。
- cardShadowEnabled - 使用此道具在过渡期间显示可见阴影。默认为true
cardOverlayEnabled - 使用此prop可在转换期间显示可见的堆栈卡覆盖。默认为false。 - transitionConfig- 返回与默认屏幕转换合并的对象的函数（在类型定义中查看TransitionConfig ）。提供的函数将传递以下参数：
- transitionProps - 为新屏幕过渡道具。
- prevTransitionProps - 转换旧屏幕的道具。
- isModal - 布尔值，指定屏幕是否为模态。
- onTransitionStart - 卡转换动画即将开始时要调用的函数。
- onTransitionEnd - 卡过渡动画完成后要调用的函数。
- transparentCard- 实验 - 支持将堆栈中的所有卡片保持可见并添加透明背景而不是白色背景。这对于实现模式对话框很有用，其中前一个场景仍应在当前场景下可见。
navigationOptions 用于导航器内的屏幕导航选项
- title - 可用作后备的字符串headerTitle。此外，将用作tabBarLabel（如果嵌套在TabNavigator中）或drawerLabel（如果嵌套在DrawerNavigator中）的后备。
- header - React Element或给定HeaderProps返回React元素的函数，显示为标题。设置为null隐藏标题。
- headerTitle - 标题使用的字符串，反应元素或反应组件。默认为场景title。当使用的成分，它接收allowFontScaling，style和children道具。传递标题字符串children。
- headerBackImage - React Element或Component在标题的后退按钮中显示自定义图像。使用组件时，它在渲染（tintColor，title）时会收到许多道具。默认为带有react-navigation/views/assets/back-icon.png后方图像源的图像组件，后者是平台的默认后退图标图像（iOS上的V形符号和Android上的箭头）。
- headerRight - React Element显示在标题的右侧。
- headerLeft - React元素或组件显示在标题的左侧。当使用的成分，它接收到一个数道具呈现时（onPress，title，titleStyle和更多-检查Header.js完整的列表）。
- headerStyle - 标题的样式对象
- .....还有好多就不一一列举了，感兴趣就去官网看看吧(https://reactnavigation.org/docs/en/stack-navigator.html)
createBottomTabNavigator的使用
屏幕底部的一个简单标签栏，可让您在不同的路线之间切换。路由被懒惰地初始化 - 它们的屏幕组件在首次聚焦之前不会被安装
API的定义
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);
RouteConfigs
route configs对象是从路由名称到路由配置的映射，它告诉导航器为该路由提供什么，请参阅堆栈导航器中的示例。
BottomTabNavigatorConfig
- initialRouteName - 首次加载时初始制表符路径的routeName。
- order - routeNames数组，用于定义选项卡的顺序。
- paths - 提供routeName到path config的映射，该映射覆盖routeConfigs中设置的路径。
- backBehavior - 后退按钮是否会导致选项卡切换到初始选项卡？如果是，则设置为initialRoute，否则none。默认为initialRoute行为。
- tabBarComponent - 可选，覆盖用作标签栏的组件。
- tabBarOptions - 具有以下属性的对象：
- activeTintColor - 活动选项卡的标签和图标颜色。
- activeBackgroundColor - 活动选项卡的背景颜色。
- inactiveTintColor - 非活动选项卡的标签和图标颜色。
- inactiveBackgroundColor - 非活动选项卡的背景颜色。
- showLabel - 是否为标签显示标签，默认为true。
- showIcon - 是否显示选项卡的图标，默认为true。
- style - 标签栏的样式对象。
-labelStyle - 选项卡标签的样式对象。 - tabStyle - 选项卡的样式对象。
-allowFontScaling - 标签字体是否应缩放以符合“文本大小”辅助功能设置，默认为true。 - safeAreaInset- 覆盖forceInset道具<SafeAreaView>。默认为{ bottom: 'always', top: 'never' }。可用键top | bottom | left | right随值提供'always' | 'never'。
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
}
navigationOptions 用于导航器内的屏幕导航选项
- title - 通用标题可以用作备用headerTitle和tabBarLabel。
- tabBarVisible - true或false显示或隐藏标签栏，如果未设置则默认为true。
- tabBarIcon - React Element或给定{ focused: boolean, horizontal: boolean, tintColor: string }返回React.Node 的函数，以显示在选项卡栏中。horizontal是true当设备处于风景和false肖像时。每当设备方向改变时，都会重新呈现图标。
- tabBarLabel - 标签栏或React元素中显示的选项卡的标题字符串或给定的函数{ focused: boolean, tintColor: string }返回React.Node，以显示在选项卡栏中。未定义时，使用场景title。要隐藏，请参阅tabBarOptions.showLabel上一节。
- tabBarButtonComponent - 包含图标，标签和实现的React Component onPress。默认值是一个包装器TouchableWithoutFeedback，使其行为与其他触摸器相同。tabBarButtonComponent: TouchableOpacity会TouchableOpacity改用。
- .....还有好多就不一一列举了，感兴趣就去官网看看吧(https://reactnavigation.org/docs/en/bottom-tab-navigator.html)
实战部分
基于react-navigation3.0最新的版本实现stack in tabs 和stack over tabs 两种效果
Stack in tabs
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {
createStackNavigator,
createBottomTabNavigator,
createAppContainer,
createMaterialTopTabNavigator,
} from 'react-navigation'
import { HomeTab, FindTab } from './Router/routers'
const CreateTab = createMaterialTopTabNavigator({
Home: {
screen: HomeTab,
navigationOptions: () => ({
tabBarLabel: '首页',
})
},
Find: {
screen: FindTab,
navigationOptions: () => ({
tabBarLabel: '发现',
})
}
}, {
initialRouteName: 'Find',
tabBarPosition: 'bottom',
lazy: true,
swipeEnabled: false,
tabBarOptions: {
activeTintColor: 'red',
style: {
backgroundColor: '#fff',
},
}
})
const CreaterTab = createAppContainer(CreateTab)
export default class App extends Component {
render() {
return (
<CreaterTab />
);
}
}
Stack over tabs
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {
createStackNavigator,
createBottomTabNavigator,
createAppContainer,
createMaterialTopTabNavigator,
} from 'react-navigation'
import { HomeTab, FindTab } from './Router/routers'
import WebScreen from './screen/web/webScreen'
const CreateTab = createMaterialTopTabNavigator({
Home: {
screen: HomeTab,
navigationOptions: () => ({
tabBarLabel: '首页',
})
},
Find: {
screen: FindTab,
navigationOptions: () => ({
tabBarLabel: '发现',
})
}
}, {
initialRouteName: 'Find',
tabBarPosition: 'bottom',
lazy: true,
swipeEnabled: true,
tabBarOptions: {
activeTintColor: 'red',
style: {
backgroundColor: '#fff',
},
}
})
const StacksOverTabs = createStackNavigator({
Root: {
screen: CreateTab,
navigationOptions: {
header: () => null,
}
},
WebView: {
screen: WebScreen,
navigationOptions: {
title: '熊孩宝测试',
},
}
});
const StacksOverTab = createAppContainer(StacksOverTabs)
export default class App extends Component {
render() {
return (
<StacksOverTab />
);
}
}
网友评论