react-navigation使用技巧(进阶篇)
来源:互联网 发布:如何修改 淘宝会员名 编辑:程序博客网 时间:2024/06/06 04:57
转子http://www.jianshu.com/p/b877115fff1b
之前写过react-navigation使用技巧,那篇文章中主要讲了react-navigation的属性,封装和一些小技巧。虽然上篇文章中也有一些小技巧,但因为补充的比较晚,导致有些人没有看全,再加上我又找到了一些新的小玩意,特此写了本篇文章,如果之后还有新发现,也会再这篇文章中更新出来。
如果遇到什么问题可以在评论区回复,或者加QQ群397885169询问
1、让TabBar拥有点击事件
感谢群友再遇见
的分享。
官方的api里面是没有提供tabBar的点击事件的,但在开发中经常需要监听tabBar的点击事件,解决这个问题的一种方法就是去修改源码,另一种是监听onTransitionEnd
。(第二种方法这里先不讨论)
源码中一共需要修改8处地方,包含3个js文件。源码在下面。
1、react-navigation目录下src/views/TabView/TabBarBottom.js
2、react-navigation目录下src/views/TabView/TabBarTop.js
3、react-navigation目录下src/views/TabView/TabView.js
注意:第111行中的getScreenConfig
需要手动改成getScreenOptions
,要不然修改完源码会报错。
源码在这里,要注意修改getScreenOptions
修改源码之后,在页面中这么用:
static navigationOptions = ({navigation,screenProps}) => ({ onTabPress:(()=>{ alert('Home'); })});
2、修改页面的跳转动画
在上一篇文章中,说了怎么将安卓的跳转动画改成iOS那样的,但其实react-navigation
一共提供了4种跳转动画:
1、从右向左: forHorizontal
;
2、从下向上: forVertical
;
3、安卓那种的从下向上: forFadeFromBottomAndroid
;
4、无动画: forInitial
。
但因为库的限制,想实现某些页面使用某种动画还是很难的,只能通过Demo中提供的笨方法来实现。
首先还是导入react-navigation
中的方法
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
如果要改变跳转动画只能在StackNavigator
中实现transitionConfig
方法
const MainStack = StackNavigator({ Main:{ screen:Main, },},{ // mode:'modal', headerMode: 'screen', transitionConfig:()=>({ // 只要修改最后的forVertical就可以实现不同的动画了。 screenInterpolator:CardStackStyleInterpolator.forVertical, })});
3、在Reset方法中传参
react-navigation
中的reset
方法,应该都不陌生吧,重置路由。但有的需求是在登陆之后,重置路由并传递参数到某个页面,之前一直以为不可以,直到群友的react-native reset方法中传参的写法的这篇文章出现,感谢群友nextChampion
的贡献。
const resetAction = NavigationActions.reset({ index: 0, actions: [ NavigationActions.navigate({routeName: 'Home', params: { token: '123456' }}) ]})this.props.navigation.dispatch(resetAction);
在页面中可以通过如下方法得到参数。
this.props.navigation.state.params.token
4、goBack返回指定页面
在上篇文章中也有这个技巧,这里是总结重发。
react-navigation目录下src/routers/StackRouter.js
if (action.type === NavigationActions.BACK) { let backRouteIndex = null; if (action.key) { const backRoute = state.routes.find( /* $FlowFixMe */ /* 修改源码 */ route => route.routeName === action.key /* (route: *) => route.key === action.key */ ); /* $FlowFixMe */ console.log('backRoute =====',backRoute); backRouteIndex = state.routes.indexOf(backRoute); console.log('backRoute =====',backRouteIndex); } if (backRouteIndex == null) { return StateUtils.pop(state); } if (backRouteIndex >= 0) { return { ...state, routes: state.routes.slice(0, backRouteIndex+1), index: backRouteIndex - 1 + 1, }; } }
注意:这样的修改源码之后,如果项目中使用Redux,并且启用了滑动返回,很会很大几率导致app卡死,所以并不太推荐这种方式,最好使用下面的方式
5、react-navigation集成Redux
可能会有人认为这样集成会麻烦,而且react-navigation
内部实现也是类似Redux
的高阶函数。我之前也是这么认为的,直到在识兔中,使用Redux 修改首页图片之后 滑动返回 会导致app卡死。
react-navigation集成Redux之后,能获取当前screen
的key
,routeNmae
等参数,goBack()
的时候就可以直接取到key
,而不用修改源码啦!
具体操作步骤可以在识兔,一款用来识别图片的开源项目中查看。
如果看不懂下面的修改步骤,可以先看下之前的文章Redux "使用"教程
集成
1、添加addNavigationHelpers
import { StackNavigator, TabNavigator, addNavigationHelpers} from 'react-navigation';
2、首先修改识兔中的App.js
的导出方式
const AppWithNavigationState = ({ dispatch, nav }) => ( <MyApp navigation={addNavigationHelpers({ dispatch, state: nav })}/>);const mapStateToProps = state => ({ nav: state.nav,});export default connect(mapStateToProps)(AppWithNavigationState);
3、创建StackReducer
// MyApp 是在App.js中导出的import { MyApp } from '../APP';export default function StackReducer(state , action) { let nextState; switch (action.type) { default: nextState = MyApp.router.getStateForAction(action, state); break; } return nextState || state;}
4、修改rootReducer
import nav from './StackReducer';const RootReducer = combineReducers({ ..., nav,});export default RootReducer;
使用
1、修改ShiTu.js
export default connect((state) => { ... const routes = state.nav.routes; return { ... routes };},{...})(ShiTu)
2、使用
const {routes} = this.props;// 会有意想不到的惊喜哦!console.log(routes);
感谢群友Roc
的提供的react-navigation集成redux的 脚手架 可以通过它快速实现集成Redux
。
6、安卓返回键在react-navigation
中的正常监听
之前使用Navigator
的时候,可以通过下面的方法实现监听安卓的返回键,但使用了react-navigation
后,会很迷茫,不知该怎么监听了。
解决办法:集成Redux
咯!
- react-navigation使用技巧(进阶篇)
- react-navigation使用技巧(进阶篇)
- react-navigation使用技巧
- react-navigation使用技巧
- react-navigation使用技巧
- react-navigation使用技巧
- react-navigation使用技巧
- react-navigation Navigation使用
- React-navigation之StackNavigator_2进阶
- 【转】关于React Navigation的一些使用技巧
- react-navigation 简单使用
- react-navigation使用
- react-navigation使用
- react-navigation使用心得
- React Navigation基础使用
- react-navigation 使用详解
- react-navigation的使用
- react-navigation 使用详解
- EventBus源码分析
- 51Nod
- SSH总结
- Vim常用命令
- 压缩与解压
- react-navigation使用技巧(进阶篇)
- python 读写 excel 笔记
- 【树状数组】学习树状数组
- Comparable
- C++学习笔记
- c语言基础
- JavaScript基础知识4
- centos7.2 安装lnmp环境 (非集成)
- 7.13--SSH学习之Struts注释