React-Native使用全局变量踩坑记

19天前

Write once Use anywhere

转载本文需注明出处:微信公众号EAWorld,违者必究。



在React native开发中,经常需要获取屏幕宽高设置布局,或者是取屏幕宽高百分比设置布局。
通常做法都是创建一个工具文件比如utils.js,然后在工具文件中提前把屏幕宽高取出来,再创建一个get方法来获取对应的值。如此我们在哪里使用就需要在哪里导入utils.js,再执行get方法获取对应的值。
如果有一百个地方使用屏幕宽高,那就需要导入100次,再get100次方法!



思来想去上面做法太鸡肋,有什么办法让我们只需获取一次,终身享用呢?
当然有!
此刻该我们的主角Global闪亮登场了。
屏幕宽高是个固定值我们完全可以在初始化的时候获取,然后存起来,之后赋值给一个全局变量。
既然是全局变量,那全世界人民都能用到它,想在哪里用就在哪里用,妈妈再也不用担心我天天get去拿值。
有了思路直接开干!

START

先创建一个constant.js,专门负责初始化全变量(全局变量的值也就是我们认定的常量值),然后在项目的入口文件第一行先导入constant.js。



导入constant.js记得加上注释。重要的事情说三遍:

1:在项目入口文件导入constant.js地方加上注释!
2:在项目入口文件导入constant.js地方加上注释!
3:在项目入口文件导入constant.js地方加上注释!
加上注释是为了防止刚接触这块代码的人看到这个导入,没有地方使用,而误以为是没有用处的代码,顺手把它删除。
搞完之后我们就可以“肆意妄为”了,在代码中有用到屏幕宽高的地方我们都可以直接使用width和height变量来作为屏幕的宽高,再也不需要先导入再get才能拿到屏幕的宽高值。
此刻心情是不是有种,想要飞一样的感觉——
Write once Use anywhere!


同样我们可以把项目中所有常量都在constant.js中初始化且挂载到Global上,比如平台,iphoneX, iphoneXR的判断 ,导航栏StatusBar的高度等等。如下:

为了避免和项目中其它人定义的变量名冲突或者是React native提供的全局变量名冲突,我会在全局变量前面加上项目缩写,比如上面加wb,使用_也可以,看个人习惯。

constant.js里面不仅仅可以放变量,我们还可以把项目中大量重复使用的方法放到它里面,例如屏幕适配方法,每个设置UI宽高的地方都要用到次此方法,如下:


nice,把大伙都凑到一起,我们就可以项目里面‘为所欲为’了。


完成项目中所有常量在constant.js中初始化后,可能有人就会问,我能不能把变量也放到Global上?答案当然是可以的,只是Global一脸嫌弃。
通常我个人喜欢把请求接口使用到的token也放到Global上,在用户登陆之后对Global中存放token变量进行赋值。如果公司token是时刻刷新的,也就需要我们时刻刷新存放token的全局变量的值。
到这里有人可能会有顾虑,Global中的变量任何地方都能使用,任何地方都能随意修改,一旦出现bug,那问题追踪岂不是要了老命?
确实是如此,大家在项目中任何地方都随意修改全局变量中的值,问题追踪真的会要我们半条老命。
所以坚决不推荐把经常修改的变量挂载到Global中以及禁止项目成员随意修改Global中的值。
在Spring Boot中约定优于配置,类似我们在使用Global变量的时候需要严格遵守上述约定,不然会物极其反 ,只有遵守了约定,才能更好发挥Write once Use anywhere。

没有万能的方案,
只有适合的方案,
愿和你一起探索一起前进!


关于作者:范跑跑,普元React-native开发工程师,毕业于长沙理工大学,专注于使用React-native开发APP,负责太平洋保险APP内部保险箱务RN改造业务。

关于EAWorld:微服务,DevOps,数据治理,移动架构原创技术分享。长按二维码关注!

COMMENTS

需要 后方可回复
如果没有账号可以 一个帐号。