前言
界面Tab导航,跳转以及title的显示效果是一款优秀APP非常重要的一部分,门面要做好,才会带来好的用户体验。
目录
安装
npm安装
- - -
yarn安装
yarn add react-navigation
使用介绍
1.navigation有三个默认的navigators:
StackNavigator: 用来实现界面间的切换, 新的界面置于栈顶。
TabNavigator:实现Tab菜单功能。
DrawerNavigator: 实现抽屉菜单的效果。
2.具体使用
StackNavigator使用:
1.创建StackNavigator
import Tab from './MainTab' ;
/**
* 应用根路由
*/
export const RootNavigator = StackNavigator({
Tab: {screen: Tab},
}, {
initialRouteName: 'Tab' ,
mode: 'card' ,
headerMode: 'screen' ,
navigationOptions: () => ({
headerBackTitle: null ,
headerTintColor: theme.NAVBAR_TITLE_COLOR,
headerStyle: {
backgroundColor: theme.NAVBAR_BG_COLOR,
borderBottomWidth: 0 ,
elevation: 0 ,
},
})
});
export default class AppWithNavigationState extends Component {
render() {
return (
this.props.dispatch,
state: this .props.nav
})} />
)
}
}
2.API 定义
StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs配置:
Tab: {screen: Tab},第一个Tab是定义的路由名字,第二个是引入的组件。使用this.props.navigation.navigate('路由名'),就可以实现跳转;
StackNavigatorConfig配置:
路由相关配置:
initialRouteName:默认的初始要跳转的界面,必须匹配一个已经配置的路由,否则报错。
initialRouteParams: 初始化路由参数。
navigationOptions: 默认的navifation选项,下面有详细总结。
paths:路由路径的配置设置。
可视化选项:
mode: 定义显示和界面切换风格 a. card - Android 和 iOS 标准模式。默认此模式。 b. modal - IOS界面从底部滑动显示,Android不支持此属性
headerMode:定义header如何渲染 a. float: header漂浮在界面之上,界面切换有个透明度的改变,不会固定在界面上跟着界面走。这个是iOS上常见的模式。 b.screen:header吸附在界面上,随着界面的移动而移动,这个是Android上面常用模式。 c.none:不渲染头。
cardStyle:对单个的card的风格进行定义。
transitionConfig: 界面切换配置。 a.transitionProps: 新界面切换属性配置。 b.prevTransitionProps: 关闭界面属性配置。 c.isModal: 布尔值,是否指定以modal的形式切换界面。
onTransitionStart: 开始切换时的回调。
onTransitionEnd: 结束切换时回调。
Navigation Options配置:
title: 界面标题。
header: 界面的头布局,设置为null则隐藏header。
headerTitle: 界面title, 当他是一个组件时,可以接收allowFontScaling, style 和 children属性。
headerTitleAllowFontScaling: 布尔值,是否允许头字体支持缩放,默认为true。
headerBackTitle: 返回title.iOS 11使用。
headerTruncatedBackTitle:返回,headerBackTitle不适用时使用。
headerRight: 显示在header右侧。
headerLeft: 显示在header左侧。
headerStyle: header的style对象。
headerTitleStyle: title组件对象。
headerBackTitleStyle:backtitle的style对象。
headerTintColor: header的颜色。
headerPressColorAndroid: Android >= 5.0 材质化设计点击涟漪效果。
gesturesEnabled: 布尔值,是否支持手势关闭屏幕,iOS 默认为true,Android默认为false。
gestureResponseDistance: 手势响应的距离。 a.horizontal - 水平的距离,默认25。 b.vertical - 垂直的距离, 默认135。
gestureDirection:重新定义手势方向,默认正常的方向。
Navigator Props: Navigator属性。
render() {
return (
.props.dispatch ,
state: this.props .nav
})} />
)
}
RootNavigator是StackNavigater组件,navigation是其属性,这样我们就可以在子组件中通过this.props.navigation取到navigation属性。
TabNavigator使用:
1.创建TabNavigator
export default TabNavigator ({
Home : {screen: Home },
StationPage : {screen : StationPage },
MessagePage : {screen : MessagePage },
AccountPage : {screen : AccountPage },
}, {
initialRouteName : 'StationPage' ,
tabBarPosition: 'bottom' ,
swipeEnabled: false,
animationEnabled: false,
navigationOptions: {
gesturesEnabled: false,
headerBackTitle: null,
},
tabBarOptions : {
showIcon : true,
activeTintColor: theme.TAB_TINT_COLOR_ACTIVE,
inactiveTintColor: theme.TAB_TINT_COLOR,
indicatorStyle: {height: 0 },
style : {
backgroundColor : '#efefef' ,
height: px(100 ) ,
paddingTop: 0 ,
},
labelStyle : {
fontSize : px(24 ) ,
marginTop: 0 ,
paddingTop: 0 ,
},
}
});
2.API 定义
TabNavigator(RouteConfigs, TabNavigatorConfig)
RouteConfigs配置:
它是一个从路由名字到路由配置的映射。使用类似StackNavigator。
TabNavigatorConfig配置:
tabBarComponent: Tab bar组件,iOS 默认在下面,Android 默认在上面。
tabBarPosition: Tab bar 的位置,“top” 或者 “bottom”。
swipeEnabled:是否允许tab之间进行切换。
animationEnabled: 是否允许切换时执行动画。
configureTransition: 配置tab之间切换动画。
lazy: 控制懒加载机制,是否需要提前加载。
initialLayout: 初始的布局,包含宽高,可已预防加载迟钝。
tabBarOptions: tabBar的一些样式选项。下面有总结。
initialRouteName: 第一个加载的路由名。
order: 对加载路由进行排序。
paths:名字到路由配置的映射,对路由配置进行设置。
backBehavior: 点击返回键,是否切换到initialRoute。
tabBarOptions配置:
activeTintColor: 选中tab的图标和标签的颜色。
activeBackgroundColor: 选中Tab的背景颜色。(IOS)
inactiveTintColor: 未被选中Tab的图标和标签的颜色。
inactiveBackgroundColor: 未被选中的Tab的背景颜色。(IOS)
showLabel:是否显示对应Tab的标签,默认显示。
style: Tab bar的样式。
labelStyle:Tab标签的样式。
tabStyle: Tab的样式。
allowFontScaling: 标签字体是否允许缩放。默认true。
showIcon:是否显示图片。默认不显示。(Android)
upperCaseLabel: 是否标签大写。默认true。(Android)
pressColor: 点击颜色。(Android >= 5.0 涟漪效果)
pressOpacity:透明度改变。(iOS and Android < 5.0 only)
scrollEnabled: 是否Tab能够滑动。(Android)
indicatorStyle: Tab 底端指示器风格。(Android)
iconStyle: Tab Icon对象样式。(Android)
Navigation Options 配置:
title: 标题。
tabBarVisible: 布尔值,tabBar是否可见。
swipeEnabled: 布尔值,是否允许在标签之间进行滑动。
tabBarIcon: tabBar图片icon。
tabBarLabel:同tabBarOptions.showLabel。
tabBarOnPress: 点击tabBar触发。 a.previousScene: { route, index } : 离开时的界面。 b.scene: { route, index } : 点击的路由,索引。 c.jumpToIndex: 在切换到下一个界面之前,可以在此方法中处理一些自定义的逻辑。
Navigator Props配置: 同上。
DrawerNavigator使用:
1.创建DrawerNavigator(官方的例子):
class MyHomeScreen extends React .Component {
static navigationOptions = {
drawerLabel: 'Home' ,
drawerIcon: ({ tintColor }) => (
require('./chats-icon.png' )}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
this.props.navigation.navigate('Notifications' )}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React .Component {
static navigationOptions = {
drawerLabel: 'Notifications' ,
drawerIcon: ({ tintColor }) => (
require('./notif-icon.png' )}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
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,
},
});
2.API定义:
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
RouteConfigs配置:
同StackNavigator配置。
DrawerNavigatorConfig配置
drawerWidth: 抽屉的宽度或者是函数返回值。
drawerPosition: 抽屉的位置,left左侧,right右侧。
contentComponent: 用来渲染抽屉内容的组件。下面详解。
contentOptions: 配置抽屉的内容。下面详解。
useNativeAnimations: 使用本地动画。默认true。
drawerBackgroundColor:抽屉的背景颜色。默认白色。
initialRouteName: 初始化路由名。
order。抽屉item显示的顺序。
paths:路由名字到配置的映射。
backBehavior: 返回按钮是否返回初始路由。yes到初始路由,否则none。
自定义contentcomponent:
import { DrawerItems, SafeAreaView } from 'react-navigation';
const CustomDrawerContentComponent = (props) => (
<ScrollView >
<SafeAreaView style ={styles.container} forceInset = {{ top : 'always ', horizontal : 'never ' }} >
<DrawerItems {...props } />
SafeAreaView >
ScrollView >
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
contentOptions配置:
items: 可以修改或者重写路由。
activeItemKey: 激活路由对应的key。
activeTintColor: 选中标签对应的标签和icon的颜色。
activeBackgroundColor: 选中标签对应的颜色。
inactiveTintColor:未选中对应的标签和icon对应的颜色。
inactiveBackgroundColor:未选中对应的北京颜色。
onItemPress(route): 当item被点击时,调用的函数。
itemsContainerStyle:对应section部分的样式。
itemStyle: 对应item的样式。
labelStyle: 对应label的样式。
iconContainerStyle:重写view的icon Container样式。
Navigation Options配置:
title: 标题。
drawerLabel: 字符串,组件或者函数。标签显示在侧边栏,没有定义title代替。
drawerIcon:组件或者函数。图片显示在侧边栏。
drawerLockMode: 指定抽屉的锁模式。 a. unlocked: 默认。响应手势的触摸开关。 b. locked-closed:抽屉保持关闭的状态,不响应手势。 c. locked-open: 抽屉一直开着,不响应手势。
Navigator Props配置: 同StackNavigator。