使用Typescript装饰器来劫持React组件

最近在捣鼓Typescript的装饰器,NodeJs项目的装饰器比较好理解,但是React项目的装饰器由于有JSX,走了一点弯路,但是总之来说是新技能get

typescript对装饰器的说明

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

ReactNative在NavigatorIOS中隐藏TabBar

ReactNative常用的一种布局是TabBar+Navigator布局,底部几个固定的标签,顶部有个导航栏,如果进入子页面的话,底部TabBar是需要隐藏起来的。

不过官方没有提供这个属性,github和StackOverflow上的答案有个bug,平时没什么问题,如果手指左滑一点然后松开,这时候路由没切换,但是TarBar会显示,然后不消失。

目前能够完美解决这个问题的方案如下:

ReactRouter不在组件中进行导航

项目使用了Flux+React Router架构,有一些需要操作路由的地方是放在Action层的,比如登录之类,但是Action层不是React组件,需要操作路由的话有点麻烦。

当然最终还是有一个办法的,利用window.location.href=,但是既然用了react,再用这种导航模式未免不妥。

查看react router源码发现,hashHistory,browseHistory中有push方法,经过测试之后可行。

React Flux ES6记事本应用

项目地址

react-notepad-es6

React出来有很久了,与angularjs最大的不同在于React只是一个处理UI层面的库,可以认为是“V”,而angularjs则是一整套解决方案。

随着前端开发的组件化思想越来越浓烈,angularjs很多场合已经显得力不从心了。而这时候,核心为“模块化、组件化”的React可以派上永用场。真正用来开发项目的话,React肯定是不足的,缺少C和M模块。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×