react-native新导航组件react-navigation详解
2017-04-14 22:56
399 查看
react-navigation
react-navigation 是今年1月份新出的一款react-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用,据称性能和效果跟原生差不多. 可能是react-native导航组件的未来主流. 但现在还是beta版本(最新
v1.0.0-beta.7)
坑还比较多, 文档和参考资料较少. 正式项目使用还需慎重.http://www.jianshu.com/p/7d435e199c96
有问题找 issues, 基本上坑都在这里.
官方文档
主要构成
按使用形式主要分三部分:1
StackNavigator: 类似于普通的Navigator,屏幕上方导航栏
2
TabNavigator: 相当于iOS里面的TabBarController,屏幕下方的标签栏
3
DrawerNavigator: 抽屉效果,侧边滑出
StackNavigator 导航栏
API: StackNavigator(RouteConfigs, StackNavigatorConfig)
// 注册导航 const Navs = StackNavigator({ Home: { screen: Tabs }, HomeTwo: { screen: HomeTwo, // 必须, 其他都是非必须 path:'app/homeTwo', 使用url导航时用到, 如 web app 和 Deep Linking navigationOptions: {} // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 具体参数详见下文 }, HomeThree: { screen: HomeThree }, HomeFour: { screen: HomeFour } }, { initialRouteName: 'Home', // 默认显示界面 navigationOptions: { // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置) header: { // 导航栏相关设置项 backTitle: '返回', // 左上角返回键文字 style: { backgroundColor: '#fff' }, titleStyle: { color: 'green' } }, cardStack: { gesturesEnabled: true } }, mode: 'card', // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果) headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏 onTransitionStart: ()=>{ console.log('导航栏切换开始'); }, // 回调 onTransitionEnd: ()=>{ console.log('导航栏切换结束'); } // 回调 });
navigationOptions
参数:title: 导航栏的标题
header: 导航栏设置对象
visible: 导航栏是否显示
title: 导航栏的标题, 可以是字符串也可以是个组件
backTitle: 左上角的返回键文字,
默认是上一个页面的title
right: 导航栏右按钮
left: 导航栏左按钮
style: 导航栏的style
titleStyle: 导航栏的title的style
tintColor: 导航栏颜色
cardStack: 配置card stack
gesturesEnabled: 是否允许右滑返回,在iOS上默认为true,在Android上默认为false
在组件中设置
static navigationOptions示例:
static navigationOptions = { title: 'homeThree', header: (navigation, defaultHeader) => ({ ...defaultHeader, // 默认预设 visible: true // 覆盖预设中的此项 }), cardStack: { gesturesEnabled: false // 是否可以右滑返回 } }; // 或这样 static navigationOptions = { // title: 'Two', // 写死标题 title: (navigation, childRouter) => { // 动态标题 if (navigation.state.params.isSelected) { return `${navigation.state.params.name}选中`; } else { return `${navigation.state.params.name}没选中`; } }, header: ({ state, setParams, goBack }) => { let right; if (state.params.isSelected) { right = (<Button title="取消" onPress={() => setParams({ isSelected: false })}/>); } else { right = (<Button title="选择" onPress={() => setParams({ isSelected: true })}/>); } let left = (<Button title="返回" onPress={() => goBack()}/>); let visible = false; // 是否显示导航栏 return { right, left, visible }; }, // header: {left: <Button title="返回"/>}, };
StackNavigatorConfig
参数:initialRouteName:
设置默认的页面组件,必须是上面已注册的页面组件
initialRouteParams:
初始路由的参数
navigationOptions:
屏幕导航的默认选项
paths: RouteConfigs里面路径设置的映射
mode: 页面切换模式:
card: 普通app常用的左右切换
modal: 上下切换
headerMode: 导航栏的显示模式:
float: 无透明效果, 默认
screen: 有渐变透明效果, 如微信QQ的一样
none: 隐藏导航栏
cardStyle: 样式
onTransitionStart: 页面切换开始时的回调函数
onTransitionEnd:
页面切换结束时的回调函数
TabNavigator 标签栏
// 注册tabs const Tabs = TabNavigator({ Home: { screen: Home, navigationOptions: { // 也可以写在组件的static navigationOptions内 tabBar: { label: '首页', icon: ({tintColor}) => (<Image source={require('./app/images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } }, Bill: { screen: Bill, navigationOptions: { tabBar: { label: '账单', icon: ({tintColor}) => (<Image source={require('./app/images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } }, Me: { screen: Me, navigationOptions: { tabBar: { label: '我', icon: ({tintColor}) => (<Image source={require('./app/images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } } }, { animationEnabled: false, // 切换页面时是否有动画效果 tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的 swipeEnabled: false, // 是否可以左右滑动切换tab backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转 tabBarOptions: { activeTintColor: '#ff8500', // 文字和图片选中颜色 inactiveTintColor: '#999', // 文字和图片未选中颜色 showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示 indicatorStyle: { height: 0 // 如TabBar下面显示有一条线,可以设高度为0后隐藏 }, style: { backgroundColor: '#fff', // TabBar 背景色 // height: 44 }, labelStyle: { fontSize: 10, // 文字大小 }, }, });
DrawerNavigator抽屉
const DrawerNav = DrawerNavigator({ Home: { screen: Home }, Bill: { screen: Bill }, Me: { screen: Me }, HomeTwo: { screen: HomeTwo }, HomeThree: { screen: HomeThree }, HomeFour: { screen: HomeFour }, BillTwo: { screen: BillTwo }, BillThree: { screen: BillThree } }, { drawerWidth: 200, // 抽屉宽 drawerPosition: 'left', // 抽屉在左边还是右边 // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件 contentOptions: { initialRouteName: Home, // 默认页面组件 activeTintColor: 'white', // 选中文字颜色 activeBackgroundColor: '#ff8500', // 选中背景颜色 inactiveTintColor: '#666', // 未选中文字颜色 inactiveBackgroundColor: '#fff', // 未选中背景颜色 style: { // 样式 } } });
navigation
在StackNavigator中注册后的组件都有
navigation这个属性.
navigation又有5个参数:
navigate,
goBack,
state,
setParams,
dispatch,
可以在组件下
console.log一下
this.props就能看到.
this.props.navigation.navigate('Two', { name: 'two' }):
push下一个页面
routeName: 注册过的目标路由名称
params: 传递的参数
action: 如果该界面是一个navigator的话,将运行这个sub-action
this.props.navigation.goBack(): 返回上一页
this.props.navigation.state: 每个界面通过这去访问它的router,state其中包括了:
routeName: 路由名
key: 路由身份标识
params: 参数
this.props.navigation.setParams: 该方法允许界面更改router中的参数,可以用来动态的更改导航栏的内容
this.props.navigation.dispatch: 可以dispatch一些action,主要支持的action有:
Navigate:
import { NavigationActions } from 'react-navigation' const navigationAction = 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(navigationAction)
Reset: Reset方法会清除原来的路由记录,添加上新设置的路由信息, 可以指定多个action,index是指定默认显示的那个路由页面,
注意不要越界了
import { NavigationActions } from 'react-navigation' const resetAction = NavigationActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Profile'}), NavigationActions.navigate({ routeName: 'Two'}) ] }) this.props.navigation.dispatch(resetAction)
SetParams: 为指定的router更新参数,该参数必须是已经存在于router的param中
import { NavigationActions } from 'react-navigation' const setParamsAction = NavigationActions.setParams({ params: {}, // these are the new params that will be merged into the existing route params // The key of the route that should get the new params key: 'screen-123', }) this.props.navigation.dispatch(setParamsAction)
Navigation Actions
支持以下actions:Navigate:
Reset:
Back:
Set Params:
Init:
Deep Link
其他app或浏览器使用url打开次app并进入指定页面. 如浏览器输入url demo4://home/home3直接进入
home3页面.
iOS版设置
使用Xcode设置Schemes;
在
AppDelegate添加一下代码:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation]; }
js组件在注册路由时设置唯一的路径path, 例如
Home2: { screen: Home2, path:'app/Home2' };
在手机浏览器访问
demo4://app/Home2,
弹窗选择打开, 就可以打开
demo4app并进到
Home2页面了.
相关文章推荐
- react-native新导航组件react-navigation详解
- react-native新导航组件react-navigation详解
- react-native新导航组件react-navigation详解
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
- React-Native中导航组件react-navigation的使用
- react-native新导航组件react-navigation详解
- React Native中导航组件react-navigation跨tab路由处理详解
- React—native 之 Navigator (导航路由)组件
- 底部导航组件组件react-native-tab-navigator的使用
- 【原创】东方耀reactnative 视频31之-开源导航组件 react-native-tab-navigator
- 【原创】东方耀reactnative 视频32之-开源导航组件 react-native-side-menu
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解(13)
- React Native入门(九)之导航组件React Navigation(1)StackNavigator
- React Native 项目常用第三方组件汇总
- React Native导航react-navigation经验浅谈
- react-native-http请求后navigator导航跳转
- react native 引用第三方组件方法
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
- React Native 中组件的生命周期
- React Native组件(二)View组件解析